import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import styles from './Header.scss';
import { Link } from 'react-router-dom';
import Menu from '@src/components/mobile/Menu';
import Search from '@src/components/mobile/Search';
import ProfileModal from '@src/components/common/ProfileModal';
import { ReactComponent as IconLogo } from '@assets/img/svg/logo_metarare.svg';
import { ReactComponent as IconSearch } from '@assets/img/svg/ico_search.svg';
import { ReactComponent as IconActivity } from '@assets/img/svg/ico_activity.svg';
import { ReactComponent as IconMenu } from '@assets/img/svg/ico_menu.svg';
import URLInfo from '@src/constants/URLInfo';
import LayerContainer from '@src/containers/common/LayerContainer';
import { useDispatch, useSelector } from 'react-redux';
import useNoScroll from '@src/hooks/useNoScroll';
import { fetchUserInfo } from '@src/store/reducers/UserReducer';
import { ReactComponent as IconShare_2 } from '@assets/img/svg/ico_share_2.svg';

const cx = classNames.bind(styles);

const Header: React.FC = ({ }) => {
  const dispatch = useDispatch();
  const { userInfo } = useSelector(store => store.user);

  const [showSearch, setShowSearch] = useState<boolean>(false);
  const [showMenu, setShowMenu] = useState<boolean>(false);
  const [showProfile, setShowProfile] = useState<boolean>(false);

  useNoScroll([showSearch, showMenu]);

  useEffect(() => {
    if (showProfile) {
      dispatch(fetchUserInfo());
    }
  }, [showProfile]);

  const handleShare = () => {
    navigator.clipboard.writeText(window.location.href).then(() => {
      alert('복사되었습니다.');
    });
  };

  return (
    <div className={cx('header_wrap')}>
      <div className={cx('header_group')}>
        <h1 className={cx('logo')}>
          <Link to={URLInfo.HOME} className={cx('link_logo')}>
            <span className={cx('blind')}>Metarere</span>
            <IconLogo className={cx('ico_logo')} />
          </Link>
        </h1>
        <div className={cx('gnb')}>
          <button type="button" className={cx('btn', 'btn_share')} onClick={handleShare}>
            <span className={cx('blind')}>share</span>
            <IconShare_2 className={cx('ico', 'ico_share')} />
          </button>
          <button type="button" className={cx('btn', 'btn_search')} onClick={() => setShowSearch(true)}>
            <span className={cx('blind')}>Search</span>
            <IconSearch className={cx('ico', 'ico_search')} />
          </button>
          <Link to={URLInfo.ACTIVITY} className={cx('btn', 'btn_activity')}>
            <span className={cx('blind')}>Activity</span>
            <IconActivity className={cx('ico', 'ico_activity')} />
          </Link>
          <button type="button" className={cx('btn', 'btn_menu')} onClick={() => setShowMenu(true)}>
            <span className={cx('blind')}>Menu</span>
            <IconMenu className={cx('ico', 'ico_menu')} />
          </button>
          {userInfo && (
            <button type="button" className={cx('btn_profile')} onClick={() => setShowProfile(true)}>
              <span className={cx('blind')}>Profile</span>
              <img src={userInfo?.simple_profile.thumbnail_image || '/static/img/svg/user_profile.svg'} alt="" width="40" height="40" className={cx('img_profile')} />
            </button>
          )}
        </div>
      </div>
      <LayerContainer onClose={() => setShowMenu(false)} useDimmedColor={true} style={{ display: showMenu ? 'block' : 'none' }}>
        <Menu onClose={() => setShowMenu(false)} />
      </LayerContainer>
      {showSearch && (
        <LayerContainer onClose={() => setShowSearch(false)} useDimmedColor={true} >
          <Search onClose={() => setShowSearch(false)} />
        </LayerContainer>
      )}
      <LayerContainer onClose={() => setShowProfile(false)} style={{ display: (showProfile && !!userInfo) ? 'block' : 'none' }}>
        <ProfileModal onClose={() => setShowProfile(false)} />
      </LayerContainer>
    </div>
  );
};

export default Header;
