import useApi from 'hooks/useApi';
import useDateRange from 'hooks/useDateRange';
import DateFilter from './DateFilter';
import styles from './WebsiteDateFilter.module.css';

export default function WebsiteDateFilter({ websiteId }) {
  const { get } = useApi();
  const [dateRange, setDateRange] = useDateRange(websiteId);
  const { value, startDate, endDate } = dateRange;

  const handleChange = async value => {
    if (value === 'all' && websiteId) {
      const data = await get(`/websites/${websiteId}`);

      if (data) {
        const start = new Date(data.createdAt).getTime();
        const end = Date.now();
        setDateRange(`range:${start}:${end}`);
      }
    } else if (value !== 'all') {
      setDateRange(value);
    }
  };

  return (
    <DateFilter
      className={styles.dropdown}
      value={value}
      startDate={startDate}
      endDate={endDate}
      onChange={handleChange}
      showAllTime={true}
    />
  );
}