import { motion } from 'framer-motion';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import DateLegends from './legend/index';
import Modal from './modal/Modal';

import FilterByType from './FilterByType';

type Props = {
  close: () => void;
  startDate: Date | undefined;
  endDate: Date | undefined;
  setStartDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
  setEndDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
  dateFieldName?: string;
  type: 'single' | 'range';
  onApply: (input: boolean) => void;
  onlySingleDatePicker?: boolean;
};

const DatePicker = ({
  startDate,
  endDate,
  close,
  setStartDate,
  setEndDate,
  type,
  onApply,
  onlySingleDatePicker = false,
}: Props) => {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    if (!startDate && !endDate) {
      setReady(false);
    } else if (startDate && !endDate && type === 'range') {
      setReady(false);
    } else {
      setReady(true);
    }
  }, [startDate, endDate, type]);

  return (
    <DateModalWrapper>
      <Container
        initial={{ opacity: 0 }}
        animate={{ opacity: 100 }}
        exit={{ height: 0, opacity: 0 }}
      >
        <InnerUI type={type}>
          <FilterByType
            {...{
              startDate,
              endDate,
              setStartDate,
              setEndDate,
              type,
            }}
          />
          <DateLegends
            className={type === 'single' ? 'mb30' : 'moveDateLegends'}
          />
          <Footer>
            <CloseButton onClick={close}>Close</CloseButton>
            {onlySingleDatePicker ? (
              <ActionButton
                ready={ready}
                singleDatePicker={onlySingleDatePicker}
                onClick={() => onApply(ready)}
              >
                APPLY
              </ActionButton>
            ) : (
              <ActionButton ready={ready} onClick={() => onApply(ready)}>
                {ready ? (
                  'APPLY'
                ) : (
                  <div>
                    <img
                      src="https://bjs-static.s3.eu-west-2.amazonaws.com/twilio-flex/general/shuffle.svg"
                      alt="shuffle"
                      height="13px"
                    />
                    {type === 'single' ? 'Date range' : 'Single'}
                  </div>
                )}
              </ActionButton>
            )}
          </Footer>
        </InnerUI>
      </Container>
    </DateModalWrapper>
  );
};

const ActionButton = styled.div<{
  ready?: Boolean;
  singleDatePicker?: Boolean;
}>`
  cursor: pointer;
  ${props =>
    !props.ready &&
    props.singleDatePicker &&
    `pointer-events: none; opacity: 0.5;`}
  color: ${props => (props.ready ? '#1B2020' : '#ccdae2')};
  width: 182px;
  height: 46px;
  font-weight: ${props => (props.ready ? 'bolder' : '400')};
  background: ${props => (props.ready ? '#FEBA30' : '#40454a')};
  border-radius: 6px;

  font-family: 'Lato', sans-serif;
  font-weight: 900;

  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    background: #ffffff 0% 0% no-repeat padding-box;
    color: #1b2020;
  }
  div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 400;
    font-family: 'Lato', sans-serif;
  }
`;

const CloseButton = styled.div`
  cursor: pointer;
  color: #8d9090;
  width: 182px;
  height: 46px;

  border: 1px solid #40454a;
  border-radius: 6px;

  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    border: 1px solid #ffffff;
    color: #ffffff;
  }
`;

const Footer = styled.div`
  display: flex;
  padding: 0px 30px 40px 30px;
  align-items: center;
  justify-content: space-between;
`;

const InnerUI = styled.div<{ type: string }>`
  position: relative;
  border: none;
  background: #1b2020 0% 0% no-repeat padding-box;
  box-shadow: 0px 0px 30px #1f242480;
  border-radius: 10px;
  opacity: 1;

  .mb30 {
    margin-bottom: 30px;
  }

  .moveDateLegends {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 52.5px;
  }
  .head {
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 22px;
    font-family: 'Lato', sans-serif;
    color: #3a3630;
    text-align: center;
    margin-top: 30px;
  }
  .lowerblock {
    background: #f5f5f4;
    padding: 30px 40px 20px 40px;
    display: flex;

    .clients {
      display: flex;
      justify-content: center;
    }
  }
`;

const DateModalWrapper = styled(Modal)`
  justify-content: center;
  align-items: center;
  display: flex;

  form {
    height: 100%;
    width: 100%;
  }
`;

export const Container: any = styled(motion.div)`
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 40px #00000029;
  border-radius: 10px;
`;

export default DatePicker;
