import { Layout, Menu, Breadcrumb, Row, Col, Avatar, Badge, Button, Input  } from 'antd';
import { useEffect, useState } from 'react';
import {Router, Route, Link, Redirect, Switch} from 'react-router-dom';
import { createFromIconfontCN, FileTwoTone } from '@ant-design/icons';
import { connect } from 'react-redux';
import { jwtDecode } from '../utils';
import {default as ButtonExSite } from './buttonExSite';
import { actionMyOrders } from '../action';
import { InputSearchGood } from '.';

const { Header, Content, Footer, Sider } = Layout;

const IconFont = createFromIconfontCN({
  scriptUrl: [
    '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js', // icon-javascript, icon-java, icon-shoppingcart (overrided)
    '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', // icon-shoppingcart, icon-python
  ],
});

const HeaderComponent = ({login, cart, getOrders}) => { 
  
  console.log('cartHeader', cart)
  const [nike, setNike] = useState('');
  const [countBasket, setCountBasket] = useState(0); console.log('CountBasket',countBasket );

  useEffect (
    () => {
      if (login) {
        // console.log('loginHeader', login)
        // const base64Url = login.split('.')[1];
        // const base64 = atob(base64Url);
        // const b = JSON.parse(base64);
        setNike(jwtDecode(login)['sub']['login']); 
        
        
      }
      
      if(!login) { console.log('logauthhhhhh')
        setNike(false);
       
      }

      const arrCount = Object.values(cart);
      const count = arrCount.reduce((accum, item) => accum + item.count, 0 );
      setCountBasket(count);
      
      console.log('arrCount', arrCount)  ;
      console.log('CountBasket',countBasket )
    } 
  , [login, cart])

    
   
  return(
    <Header className="header">
    {/* <div className="logo" /> */}
    
      <Row>
        <Col span={12}>
        </Col>

        <Col span={15}>
          <InputSearchGood/> 
        </Col>  

       { nike? 
        < >
          <Col span={1}>
          <div className="icons-list">
           <Avatar size={40}>{nike}</Avatar> 
          </div>
          </Col>
          <Col span={1}></Col>
          <Col span={1}>
          <ButtonExSite/>
          </Col>
        </>:
        <>
          <Col span={2}>
          <Button>
            <Link to = {`/login`}> Вход</Link>
          </Button>
           
          </Col>
          <Col span={2}>
            <Button>
              <Link to = {`/registration`}>Регистрация</Link>
            </Button>
            
          </Col>
        </>
        }

        <Col span={1}></Col>
        <Col span={1}>
        <Link to='/basket'>
          <Badge count={countBasket} size="small" style={{marginTop: "11px"}}>
            <IconFont type="icon-shoppingcart" style={{color:'blue', fontSize: "40px", marginTop: "14px"}}/>
          </Badge>  
        </Link>
        </Col>

        <Col span={1}> <Link to='/listOrders'>
          <FileTwoTone twoToneColor="blue" style={{fontSize: "35px", marginTop: "15px", }} onClick={()=> getOrders()}/>
        </Link></Col>
       


      </Row>
    
  </Header>
  )
} 

const mapStateToProps = (state) => ({
  login: state.auth?.token,
  cart: state?.cart
})

const mapDispatchToProps = {
  getOrders: actionMyOrders,
}

const HeaderSite = connect(mapStateToProps, mapDispatchToProps)(HeaderComponent)

export default HeaderSite;