// @flow
import React, { useState } from 'react';
import styled from 'styled-components';
import ApoliticalBrand from '../../Theme/ApoliticalBrand';
import SearchForm from '../Molecule/SearchForm/SearchForm';
import SearchIconLight from '../Atom/SearchIconLight/SearchIconLight';

type Props = {
  className?: string,
};
const { color } = ApoliticalBrand;
const Wrapper = styled.div``;

const ModalOpenIcon = styled(SearchIconLight)`
  width: 24px;
  cursor: pointer;
`;

const ModalOpenButton = styled.button`
  border: 0;
  background: transparent;
`;

const ModalSearchForm = styled(SearchForm)`
  border-radius: 5px;
  border: solid 1px ${color.paleGreyTwo};
  height: 5rem;
  margin: 2rem;
  margin-top: 6rem;
  >div {
    padding: 0;
    >button {
      display: flex;
      position: fixed;
      margin-top: -4.5rem;
      top: 0;
    }
  }
`;

const StyledModal = styled.div`
  position: fixed;
  display: ${({ active }) => (active ? 'flex' : 'none')};
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 1;
`;

const CloseSearchButton = styled.button`
  position: fixed;
  top: 2rem;
  right: 2rem;
  color: rgb(76, 76, 76);
  background: #fff;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  outline: 0;
  border-bottom-left-radius: .2rem;
  align-self: self-end;

  &:before, &:after {
    content: '';
    position: absolute;
    top: 1.6rem;
    left: 0.25rem;
    width: 3rem;
    height: 0.1rem;
    background-color: #888;
  };

  &:before {
    transform: rotate(45deg);
  };

  &:after {
    transform: rotate(-45deg);
  };

  &:hover:before, &:hover:after {
    background-color: #444;
  };

  @media screen and (min-width: 876px) {
    align-self: first baseline;
    border-bottom-right-radius: .2rem;
    border-bottom-left-radius: 0;
  }
`;

const ModalSearch = ({
  className,
} : Props) => {
  const [active, setActive] = useState<boolean>(false);

  const handleCompactClick = () => {
    setActive(!active);
  };

  return (
    <Wrapper className={className}>
      <ModalOpenButton type="button" onClick={handleCompactClick}>
        <ModalOpenIcon />
      </ModalOpenButton>
      <StyledModal active={active}>
        <CloseSearchButton type="button" onClick={handleCompactClick} />
        <ModalSearchForm />
      </StyledModal>
    </Wrapper>
  );
};

ModalSearch.defaultProps = {
  className: '',
};

export default ModalSearch;