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

interface Props {
  date: Date | undefined;
  type: 'from' | 'till';
  onSelect: (newDate: Date | undefined) => void;
  from: Date;
  children?: React.ReactNode;
}

function SingleRangeDateItem({ date, type, onSelect, children, from }: Props) {
  const clearDate = () => onSelect(undefined);

  const promptText = useMemo(() => {
    if (type === 'from') {
      return (
        <span>
          Please select a <Italic>{type.toUpperCase()}</Italic> date to filter
        </span>
      );
    }
    return (
      <span>
        Please select a <Italic>TO</Italic> date
      </span>
    );
  }, [type]);

  const today = new Date();

  return (
    <Container>
      <PromptOrClearDate
        clearDate={clearDate}
        date={date}
        promptText={promptText}
      />
      <CustomDatePicker
        from={from}
        maxStartDate={today}
        type={type}
        date={date}
        onSelect={onSelect}
        children={children}
      />
    </Container>
  );
}

const Italic = styled.i`
  font-style: italic;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0;
`;
export default SingleRangeDateItem;
