import React, { useEffect } from 'react';
import styled from 'styled-components';
import CustomDatePicker from '../CustomDatePicker';
import { Prompt } from '../header/PromptOrClearDate';
import SingleRangeDateItem from './SingleRangeDateItem';

function FromDate({ startDate, setFrom, setEnd }: any) {
  useEffect(() => {
    setFrom(startDate);
  }, []);

  return (
    <SingleRangeDateItem
      from={startDate}
      date={startDate}
      onSelect={(date: any) => {
        setFrom(date);
        setEnd(undefined);
      }}
      type="from"
    />
  );
}

function TillDate({ setTill, startDate, endDate }: any) {
  const isWaiting = !!!startDate;

  useEffect(() => {
    setTill(endDate);
  }, []);

  return (
    <TillDateItem
      from={startDate}
      date={endDate}
      onSelect={setTill}
      type="till"
      $waiting={isWaiting}
    >
      {isWaiting && <AwaitingFrom />}
    </TillDateItem>
  );
}

function AwaitingFrom() {
  return (
    <AwaitingContainer>
      <AwaitingText>
        Awaiting{' '}
        <b>
          <i>FROM</i>
        </b>{' '}
        date
      </AwaitingText>
    </AwaitingContainer>
  );
}

const AwaitingContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;

  width: calc(100% - 60px);
  height: 100%;
  background: #1b2020;
  opacity: 0.95;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
`;
const AwaitingText = styled.span`
  font-weight: 300;
  opacity: 0.65;
  font-family: 'Lato', sans-serif;
  font-size: 22px;
  color: #fefefe;

  & > b > i {
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-style: italic;
  }
`;

const TillDateItem = styled(SingleRangeDateItem)<{ $waiting: boolean }>`
  ${CustomDatePicker} {
    //   filter: blur(1px);
    ${props => props.$waiting && 'cursor: not-allowed;'};
  }

  ${Prompt} {
    ${props => props.$waiting && 'visibility: hidden;'};
  }
  ${AwaitingText} {
    //  filter: unset;
  }
`;

export { FromDate, TillDate };

