import React, { useState } from 'react';
import { Radio, Stack, RadioGroup, FormControl, FormLabel, Select } from '@chakra-ui/react';
import { RangeDatepicker, SingleDatepicker } from 'chakra-dayzed-datepicker';
import propTypes from 'prop-types';

import { DAYS_IN_WEEK } from '../../modules/recorder/constants';

function ScheduleSelector({ scheduleValues = {}, onScheduleChange }) {
  const { startDate = new Date(), endDate, dayOfWeek, dayOfMonth } = scheduleValues;
  // const selectedDates = [startDate, ...(endDate ? [endDate] : [])];
  const [selectedDates, setSelectedDates] = useState([startDate, new Date()]);
  // Sử dụng useState để lưu trữ giá trị tùy chọn được chọn
  const [selectedOption, setSelectedOption] = useState('daily');

  const handleRadioChange = (value) => {
    // Cập nhật giá trị tùy chọn được chọn và gọi hàm callback
    setSelectedOption(value);
    onScheduleChange({ frequency: value });
  };

  const handleSingleDateChange = (value) => {
    onScheduleChange({ frequency: selectedOption, startDate: value });
  };

  const handleDateRangeChange = (values) => {
    setSelectedDates(values);
    // console.log(values);
    onScheduleChange({ frequency: selectedOption, startDate: values[0], endDate: values[1] });
  };

  return (
    <>
      <FormControl as="fieldset">
        <FormLabel as="legend">Schedule Type</FormLabel>
        <RadioGroup value={selectedOption} onChange={handleRadioChange}>
          <Stack spacing={5} direction="row">
            <Radio value="daily">Daily</Radio>
            <Radio value="weekly">Weekly</Radio>
            <Radio value="monthly">Monthly</Radio>
            <Radio value="custom">Custom</Radio>
          </Stack>
        </RadioGroup>
      </FormControl>
      <FormControl as="fieldset">
        <FormLabel as="legend">
          {selectedOption === 'custom'
            ? 'Date Range'
            : selectedOption === 'weekly'
            ? 'Select Day of the Week'
            : selectedOption === 'monthly'
            ? 'Select Day of the Month'
            : 'Start Date'}
        </FormLabel>
        {selectedOption === 'custom' ? (
          <RangeDatepicker selectedDates={selectedDates} onDateChange={handleDateRangeChange} />
        ) : selectedOption === 'weekly' ? (
          <Select
            placeholder="Select a day of the week"
            value={dayOfWeek}
            onChange={(e) => onScheduleChange({ frequency: selectedOption, dayOfWeek: e.target.value })}
          >
            {Object.values(DAYS_IN_WEEK).map((day, index) => (
              <option key={day} value={index}>
                {day}
              </option>
            ))}
          </Select>
        ) : selectedOption === 'monthly' ? (
          <Select
            placeholder="Select a day of the month"
            value={dayOfMonth}
            onChange={(e) => onScheduleChange({ frequency: selectedOption, dayOfMonth: e.target.value })}
          >
            <option value="1">1st</option>
            <option value="15">15th</option>
            <option value="end">Last Day</option>
          </Select>
        ) : (
          <SingleDatepicker date={startDate} onDateChange={handleSingleDateChange} />
        )}
      </FormControl>
    </>
  );
}

ScheduleSelector.propTypes = {
  scheduleValues: propTypes.shape({
    startDate: propTypes.instanceOf(Date),
    endDate: propTypes.instanceOf(Date),
    dayOfWeek: propTypes.string,
    dayOfMonth: propTypes.string,
  }),
  onScheduleChange: propTypes.func.isRequired,
};

export default ScheduleSelector;
