// FilterPopup.tsx
// import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';

import { Form, Card } from 'antd';
import InputSearch from '@/components/form/InputSearch';
import InputSelect from '@/components/form/InputSelect';
import MasterCities from '@/components/masterDropdowns/MasterCities';
// import type { AppDispatch, RootState } from '@/store/store';
// import { useDispatch, useSelector } from 'react-redux';
// import { fetchCreatedByProjectEmployee, fetchProjectRegions } from '../slice';
// import { fetchProjectRegions } from '../slice';

// import InputSelect from '@/components/form/InputSelect';
// import type { createdOptionsI, regionOptionsI } from '../interface';
// import type { regionOptionsI } from '../interface';

interface FilterI {
    onSearch: (filter: any) => void
    defaultFilter: {
      cities:
        | Array<{
            city_name: string
            city_id: number
          }>
        | undefined
    }
    status: 'loading' | 'succeeded' | 'failed'
    isSuperAdmin?: boolean

}
interface SearchValuesI {
    page: number
    search?: string
    city_id?: number | string | null
    cluster_manager_id?: number | null
    team_lead_id?: number | null
    location?: string | null
    created_by?: number | string
}

const FilterProject: React.FC<FilterI> = ({ onSearch, defaultFilter, status, isSuperAdmin }) => {
  const [form] = Form.useForm();
  // const dispatch: AppDispatch = useDispatch();
  const [searchValues, setSearchValues] = useState<SearchValuesI>({
    page: 1,
  });
  const cityOptions = defaultFilter.cities?.map((city) => ({
    value: city.city_id,
    label: city.city_name,
  }));
  // const createdByData = useSelector((state: RootState) => state?.launches?.projectEmpList);
  // const regionData = useSelector((state: RootState) => state?.launches?.regionList);
  // const createdByOptions = createdByData?.map((user: createdOptionsI) => ({
  //   value: user?.user_id,
  //   label: `${user?.first_name} ${user?.last_name} (${user?.role_label})`,
  // }));
  // const regionOptions = regionData?.map((region: regionOptionsI) => ({
  //   value: region?.region_id,
  //   label: region?.region_name,
  // }));

  // useEffect(() => {
  //   // fetchEmployee({});
  //   fetchRegions({});
  // }, []);

  // const fetchEmployee = (filter: any) => {
  //   dispatch(fetchCreatedByProjectEmployee(filter));
  // };

  // const fetchRegions = (filter: any) => {
  //   dispatch(fetchProjectRegions(filter));
  // };
  return (
    <Card size="small" className="mb-3">
      <Form form={form} layout="inline" name="horizontal_login" className="custom-filter-horizontal">
        <div className="custom-filter-horizontal-label">
          <Form.Item label="Filter:"></Form.Item>
        </div>
        <div className="custom-filter-horizontal-content">
          <InputSearch
            onSearch={(search) => {
              const param = {
                ...searchValues,
                search,
              };
              setSearchValues(param);
              onSearch(param);
            }}
            className="ml-0"
            disabled={status === 'loading'}
          />
          {isSuperAdmin && (
            cityOptions && cityOptions?.length > 0 ? (
              <InputSelect
                name="city"
                placeholder="City"
                options={cityOptions}
                style={{ width: 150 }}
                onSelect={(value) => {
                  const param = {
                    ...searchValues,
                    city_id: value || cityOptions?.map((city) => city.value).join(','),
                  };
                  setSearchValues(param);
                  onSearch(param);
                }}
                onClear={() => { }}
                disabled={status === 'loading'}
              />
            ) : (
              <MasterCities
                style={{ width: '150px' }}
                onSelect={(value) => {
                  const param: any = {
                    ...searchValues,
                    city_id: value,
                  };
                  setSearchValues(param);
                  onSearch(param);
                }}
                onClear={() => {
                  const param = {
                    ...searchValues,
                    city_id: null,
                  };
                  setSearchValues(param);
                  onSearch(param);
                }}
                disabled={status === 'loading'}
              />
            )
          )}
          {/* Projects can not be created in CRM now so it will be null for all projects */}
          {/* <InputSelect
            name="created_by"
            placeholder="Created By"
            style={{ width: '250px' }}
            options={createdByOptions}
            onSelect={(value) => {
              const param = {
                ...searchValues,
                created_by: value,
              };
              setSearchValues(param);
              onSearch(param);
            }}
            disabled={status === 'loading'}
          /> */}

          {/* <InputSelect
            name="region_id"
            placeholder="Region"
            style={{ width: '200px' }}
            options={regionOptions}
            onSelect={(value) => {
              const param = {
                ...searchValues,
                region_id: value,
              };
              setSearchValues(param);
              onSearch(param);
            }}
            disabled={status === 'loading'}
          /> */}
          <InputSearch
            placeholder="Search by Location"
            onSearch={(location) => {
              const param = {
                ...searchValues,
                location,
              };
              setSearchValues(param);
              onSearch(param);
            }}
            className="ml-0"
            disabled={status === 'loading'}
          />
        </div>
      </Form>
    </Card>
  );
};

export default FilterProject;