'use client';
import { Table } from 'antd';
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import { fetchAllLeads } from '../slice';
import RadioInput from '@/components/form/RadioInput';
import { type ListMeta } from '@/interfaces/common';
import { LEADS_STATUS } from '@/utills/constant';
import { type AppDispatch } from '@/store/store';
import { LeadsRecordI } from '../interface';

const LeadsTabs: React.FC<any> = forwardRef(
  (
    props: {
            selectedMenuItem: string
            setFilters: any
            filters: any
            allLeads: any[]
            handleTableChange: any
            columns: any[]
            leadsMeta: ListMeta
            status: string
            showLeadsCalendar: boolean
            onRow: (record: LeadsRecordI) => {}
            forwardRef: React.Ref<{ clearRadio: (filter: any) => void }>
            loading: any
            rowClassName: any
        },
  ) => {
    const {
      selectedMenuItem,
      filters,
      allLeads,
      handleTableChange,
      columns,
      leadsMeta,
      forwardRef,
      onRow,
      loading,
      rowClassName,
    } = props;
    const dispatch: AppDispatch = useDispatch();
    const [, setSelectedRadioValue] = useState(1);
    const tableRef = useRef<HTMLDivElement | null>(null);

    const handleRadioChange = (value: any): void => {
      let obj = {
        filters: filters,
        tabKey: selectedMenuItem,
      };
      if (value === 1) {
        delete obj.filters.status_id;
        dispatch(fetchAllLeads(obj));
      } else {
        obj.filters.status_id = [value];
        dispatch(fetchAllLeads(obj));
      }
      setSelectedRadioValue(value)

    };

    useImperativeHandle(
      forwardRef,
      () => ({
        clearRadio: async(filterVal: any) => {
          setSelectedRadioValue(filterVal);
        },
      }),
      []
    );

    return (
      <div>
        {['scheduled', 'visited'].includes(selectedMenuItem) && (
          <div className="mb-3">
            <RadioInput
              options={[
                { label: `All ${selectedMenuItem === 'scheduled' ? 'Scheduled' : 'Visited' } Leads`, value: 1 },
                {
                  label: 'Site Visits',
                  value:
                                        selectedMenuItem === 'scheduled'
                                          ? LEADS_STATUS?.scheduled_sv?.id
                                          : LEADS_STATUS?.visit_sv?.id,
                },
                {
                  label: 'OBM',
                  value:
                                        selectedMenuItem === 'scheduled'
                                          ? LEADS_STATUS?.scheduled_obm?.id
                                          : LEADS_STATUS.visit_obm?.id,
                },
                {
                  label: 'VC',
                  value:
                                        selectedMenuItem === 'scheduled'
                                          ? LEADS_STATUS?.scheduled_vc?.id
                                          : LEADS_STATUS?.visit_vc?.id,
                },
              ]}
              value={filters?.status_id?.length > 0 && filters?.status_id[0] || 1}
              onChange={handleRadioChange}
            />
          </div>
        )}
        <>
          <Table
            columns={columns}
            dataSource={allLeads}
            rowKey={'id'}
            ref={tableRef}
            bordered
            onRow={onRow}
            rowClassName={rowClassName}
            tableLayout="fixed"
            scroll={{ x: true }}
            className="table-layout-fixed"
            loading={loading === true}
            pagination={{
              current: leadsMeta?.current_page,
              pageSize: leadsMeta?.per_page,
              total: leadsMeta?.total,
              showSizeChanger: true,
              pageSizeOptions: ['10', '20', '50', '100'],
              defaultPageSize: 10,
              showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} entries`,
            }}
            onChange={(pagination: any, tableFilters: any, sorter: any) => {
              const myTableFilter = {
                ...tableFilters,
                ...filters,
              };
              handleTableChange(pagination, myTableFilter, sorter);
            }}
          />
        </>
      </div>
    );
  }
);

LeadsTabs.displayName = 'LeadsTabs';
export default LeadsTabs;