import React, { useEffect, useState } from 'react';
import type { Dayjs } from 'dayjs';
import { Badge, type BadgeProps, Calendar } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { fetchLeadsCalendar } from '../slice';
import { type AppDispatch, type RootState } from '@/store/store';
import moment from 'moment';
import { type filterI } from '../interface';
import RadioInput from '@/components/form/RadioInput';
import { LEADS_STATUS } from '@/utills/constant';
import dayjs from 'dayjs';

// Options for scheduled and visited radio inputs
const ScheduledRadioOptions = [
  { label: 'All Scheduled Leads', value: 0 },
  {
    label: 'Site Visits',
    value: LEADS_STATUS?.scheduled_sv?.id,
  },
  {
    label: 'OBM',
    value: LEADS_STATUS?.scheduled_obm?.id,
  },
  {
    label: 'VC',
    value: LEADS_STATUS?.scheduled_vc?.id,
  },
];

const VisitedRadioOptions = [
  { label: 'All Visited Leads', value: 0 },
  {
    label: 'Site Visits',
    value: LEADS_STATUS.visit_sv.id,
  },
  {
    label: 'OBM',
    value: LEADS_STATUS?.visit_obm?.id,
  },
  {
    label: 'VC',
    value: LEADS_STATUS?.visit_vc?.id,
  },
];

const ScheduledCalendar: React.FC<any> = (props: {
    filters: filterI
    selectedMenuItem: string
    onShowTask: (id: number) => void
}) => {
  const { filters, onShowTask, selectedMenuItem } = props;

  const [status, setStatus] = useState<string | number>(0);
  const [dates, setDates] = useState<string[]>([moment().startOf('month').format('YYYY-MM-DD'), moment().endOf('month').format('YYYY-MM-DD')]);

  const dispatch: AppDispatch = useDispatch();
  const calendarData = useSelector((state: RootState) => state?.allLeads?.leadCalendar);

  useEffect(() => {
    fetchLeads();
  }, [JSON.stringify(filters)]);

  // Fetch leads based on filters
  const fetchLeads = (): void => {
    const obj:any = {
      ...filters,
    };
    obj.status_id =  status;
    obj.start_date = dates[0];
    obj.end_date = dates[1];
    obj.tab_key = selectedMenuItem;
    dispatch(fetchLeadsCalendar(obj));
  };

  // Get list data for rendering events on the calendar
  const getListData = (value: Dayjs, calendarData: any) => {
    const listData = [];

    for (let i = 0; i < calendarData?.length; i++) {
      const lead = calendarData[i];
      const calDate = selectedMenuItem === 'scheduled' ? lead?.scheduled_date : lead?.site_visited_date;
      if (dayjs(value).isSame(dayjs(calDate), 'date')) {
        listData.push({ type: 'success', content: lead?.customer_name, id: lead.id });
      }
    }
    return listData;
  };

  // Render the events on the calendar
  const dateCellRender = (value: Dayjs) => {
    const listData = getListData(value, calendarData);
    return (
      <ul className="events">
        {listData?.map((item, index: number) => (
          <li
            key={index}
            onClick={() => {
              // router.push(`/all-leads/view-lead/${item.id}`)
              onShowTask(item.id);
            }}
            className="link"
          >
            <Badge status={item.type as BadgeProps['status']} text={item.content} />
          </li>
        ))}
      </ul>
    );
  };

  // Handle panel change event on calendar
  const onPanelChange = (value: Dayjs): void => {
    const selectedMonth = value.month() + 1;
    const obj:any = {
      ...filters,
    };
    obj.status_id =  status;
    obj.tab_key = selectedMenuItem;

    obj.start_date = moment()
      .month(selectedMonth - 1)
      .startOf('month')
      .format('YYYY-MM-DD');
    obj.end_date = moment()
      .month(selectedMonth - 1)
      .endOf('month')
      .format('YYYY-MM-DD');

    dispatch(fetchLeadsCalendar(obj));
    setDates([obj.start_date, obj.end_date]);
  };

  // Handle radio input change event
  const  onRadioChange = (value:number): void => {
    setStatus(value);

    const obj:any = {
      ...filters,
    };
    obj.status_id =  value;

    obj.start_date = dates[0];
    obj.end_date = dates[1];
    obj.tab_key = selectedMenuItem;

    dispatch(fetchLeadsCalendar(obj));
  };

  return (
    <>
      <div className="mb-3 mt-3">

        <RadioInput
          options={selectedMenuItem === 'scheduled' ? ScheduledRadioOptions : VisitedRadioOptions }
          value={status}
          onChange={(v) =>onRadioChange(v as number)}
        />
      </div>
      <Calendar onPanelChange={onPanelChange} cellRender={dateCellRender} mode={'month'}/>
    </>
  );
};

export default ScheduledCalendar;