import { useSelector } from 'react-redux';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useState, useEffect } from 'react';
import classNames from 'classnames';

import {
  faBasketShopping,
  faUser,
  faLocationDot,
  faPhone
} from "@fortawesome/free-solid-svg-icons";


import { Search } from './search';
import { selectCart } from '../../redux/cart/selectors';

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export const Header: React.FC = () => {
  //const { items, totalPrice } = useSelector(selectCart);
  const [showBasketCard, setShowBasketCard] = useState(false);
  const isMounted = React.useRef(false);
  const updateDataHeader = () => {
    setShowBasketCard(true);
    console.log('clik');
  }

  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

console.log(windowDimensions);
  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);

  //React.useEffect(() => {
    if (isMounted.current) {
   //   const json = JSON.stringify(items);
     // localStorage.setItem('cart', json);
    }
    isMounted.current = true;
 // }, [items]);

  return (
    <header>
      <div className={classNames('block logo')}>
        <p>Logo</p>
      </div>
      <div className={classNames('block address')} >
        <div className={"address_box"}>
          <FontAwesomeIcon icon={faLocationDot} />
          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
        </div>
      </div>
      <div className={classNames('block telephone')} >
        <div className={'description'}>
          <a href="tel:+7(999)-999-99-99">
            <FontAwesomeIcon icon={faPhone} />
            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
            <br></br>
            <span className={"entrance_link"}>Звонок бесплатный</span>
          </a>
        </div>
      </div>
      <div className={classNames('block basket')} >
        <div className={'description'}>
          <i className="icon">
            <FontAwesomeIcon
              icon={faBasketShopping}
              className={'basket'}
              onClick={(e) => updateDataHeader()}
            />
            <p className={classNames('link entrance_link')}>Корзина</p>
          </i>
        </div>
      </div>
      <div className={classNames('block entrance')} >
        <div className={'description'}>
          <a href="admin">
            <i className="icon">
              <FontAwesomeIcon
                icon={faUser}
                className={'basket'}
              />
            </i>
            <p className={classNames('link entrance_link')}>Войти</p>
          </a>
        </div>
      </div>
    </header>
  );
};