import React, { useState } from 'react';
import { NavLink, useHistory } from 'react-router-dom';
import styled from 'styled-components';
import InputBlock from './common/Input';
import SearchBox from './common/SearchBox';
import DropDownButton from './common/DropdownButton';
import Button from './common/Button';
import Modal from './SearchOptionModal';
// 헤더 사이즈
const HeaderHeight = '170px';

const HeaderTop = styled.div`
  background-color: black;
  float: up;
  height: 20px;
`;

const MainContainer = styled.div`
  height: ${HeaderHeight};
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background-color: #ffffff;
  border-bottom: 1px solid #868e96;
`;
const MenuContainer = styled.div`
  position: fixed;
  top: 100px;
  left: 0px;
`;

const LogoContainer = styled.div`
  margin-top: 20px;
  float: left;
  padding: 20px;
  img {
    width: 100px;

    vertical-align: bottom;
  }
`;

const SearchContainer = styled.div`
  margin-top: 20px;
`;

const SLink = styled(NavLink)`
  list-style-type: none;
  color: black;
  float: left;
  line-height: 55px;
  vertical-align: middle;
  text-align: center;
  padding-left: 2em;
  padding-right: 2em;
  text-decoration: none !important;
  &:hover {
    background-color: #feebb6;
  }
  &.active {
    font-weight: 600;
    background-color: #feebb6;
    float: left;
    line-height: 55px;
    vertical-align: middle;
    text-align: center;
    padding-left: 2em;
    padding-right: 2em;
    color: black;
    text-decoration: none !important;
  }
`;

const SearchOptionContainer = styled.div`
  float: left;
`;

const SortOptionContainer = styled.div`
  float: left;
`;

const OptionContainer = styled.div`
  position: fixed;
  top: 130px;
  left: 650px;
`;

const UserContainer = styled.div`
  position: fixed;
  top: 35px;
  right: 0;
  padding-right: 20px;
`;

const AirContainer = styled.div`
  height: ${HeaderHeight};
`;

const Header = () => {
  const [showModal, setShowModal] = useState(false);
  const openModal = () => {
    setShowModal(prev => !prev);
  };
  const [setQuery] = useState('');
  const history = useHistory();
  const onMainClick = () => {
    setQuery('');
    history.push('');
  };

  return (
    <>
      <MainContainer>
        <HeaderTop />
        <LogoContainer onClick={onMainClick}>로고</LogoContainer>
        <SearchContainer>
          <DropDownButton
            color="blue"
            float="left"
            fontsize="20px"
            height="34px"
          >
            전체
          </DropDownButton>
          <InputBlock color="blue" size="14px" float="left" width="400px">
            <input />
          </InputBlock>
          <SearchBox color="blue" size="50px" />
        </SearchContainer>
        <MenuContainer>
          <ul>
            <SLink activeClassName="active" to="categori0">
              전체
            </SLink>
            <SLink to="/categori1">개인</SLink>
            <SLink to="/categori2">부서</SLink>
          </ul>
        </MenuContainer>
        <OptionContainer>
          <SearchOptionContainer onClick={openModal}>
            <Button color="white">고급 검색</Button>
          </SearchOptionContainer>
          <Modal showModal={showModal} setShowModal={setShowModal} />
          <SortOptionContainer>
            <DropDownButton
              color="white"
              width="80px"
              fontsize="15px"
              height="28px"
            >
              정렬
            </DropDownButton>
          </SortOptionContainer>
        </OptionContainer>
        <UserContainer>
          <Button color="white" width="100px" height="50px" fontsize="20px">
            사용자 님
          </Button>
        </UserContainer>
      </MainContainer>
      <AirContainer />
    </>
  );
};
export default Header;