import React from "react";
import DateSegment from "../date-segment";
import LabeledDatePicker from "@/shared/components/labeled-date-picker";
import FilterHeader from "../filter-header";
import { AdvancedDateFilterValues } from "@/shared/components/advanced-date-filter/schemas/advanced-date-filter.schema";
import { Controller, useFormContext } from "react-hook-form";
import ValidationError from "@/shared/components/validation-error";

type TFilterDateGroupProps = {
  title: string;
  fieldName: 'dateRange' | 'createdAt';
};

const FilterDateGroup = ({
  title,
  fieldName,
}: TFilterDateGroupProps) => {
  const { control, resetField, formState: { errors } } = useFormContext<AdvancedDateFilterValues>();
  const error = errors[fieldName];
  console.log("error", error)

  const handleReset = () => {
    resetField(`${fieldName}.segment`, { defaultValue: undefined });
    resetField(`${fieldName}.from`, { defaultValue: null });
    resetField(`${fieldName}.to`, { defaultValue: null });
  };
  const handleSegmentChange = (newSegment: "today" | "this_week" | "this_month") => {
    // Calculate dates based on selected segment
    const today = new Date();
    let fromDate: Date;
    let toDate: Date;

    switch (newSegment) {
      case "today":
        fromDate = new Date(today);
        fromDate.setHours(0, 0, 0, 0); // Start of today
        toDate = new Date(today);
        toDate.setHours(23, 59, 59, 999); // End of today
        break;

      case "this_week":
        // Get start of week (Monday)
        const startOfWeek = new Date(today);
        const dayOfWeek = today.getDay(); // 0 = Sunday, 1 = Monday, ...
        const diff = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; // Adjust to make Monday start of week
        startOfWeek.setDate(today.getDate() + diff);
        startOfWeek.setHours(0, 0, 0, 0);

        // Get end of week (Sunday)
        const endOfWeek = new Date(startOfWeek);
        endOfWeek.setDate(startOfWeek.getDate() + 6);
        endOfWeek.setHours(23, 59, 59, 999);

        fromDate = startOfWeek;
        toDate = endOfWeek;
        break;

      case "this_month":
        // Get start of month
        const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
        startOfMonth.setHours(0, 0, 0, 0);

        // Get end of month
        const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
        endOfMonth.setHours(23, 59, 59, 999);

        fromDate = startOfMonth;
        toDate = endOfMonth;
        break;

      default:
        fromDate = new Date();
        toDate = new Date();
    }

    // Update segment and set calculated dates
    resetField(`${fieldName}.segment`, { defaultValue: newSegment });
    resetField(`${fieldName}.from`, { defaultValue: fromDate });
    resetField(`${fieldName}.to`, { defaultValue: toDate });
  };

  return (
    <div className='flex flex-col gap-2.5'>
      <div className='flex flex-col gap-4'>
        <FilterHeader
          title={title}
          handleReset={handleReset}
        />
        <Controller
          name={`${fieldName}.segment`}
          control={control}
          render={({ field }) => (
            <DateSegment
              dateRangeSegmentValue={field.value}
              handleDateRangeSegment={handleSegmentChange}
            />
          )}
        />
      </div>

      <div className='flex justify-between gap-[43px]'>
        <Controller
          name={`${fieldName}.from`}
          control={control}
          render={({ field }) => (
            <LabeledDatePicker
              label="From"
              dateRangeDateFrom={field.value ?? undefined}
              setDateRangeDateFrom={(date) => field.onChange(date || null)}
              datePickerStyle="w-[155px]"
            />
          )}
        />
        <Controller
          name={`${fieldName}.to`}
          control={control}
          render={({ field }) => (
            <LabeledDatePicker
              label="To"
              dateRangeDateFrom={field.value ?? undefined}
              setDateRangeDateFrom={(date) => field.onChange(date || null)}
              datePickerStyle="w-[155px]"
            />
          )}
        />
      </div>
      {error && <ValidationError>
        {error?.from?.message}
        </ValidationError>}
    </div>
  );
};

export default FilterDateGroup;