// FilterPopup.tsx
import React, { useEffect, 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 { SearchLaunchValuesI, createdOptionsI } from '../interface';
import { useDispatch, useSelector } from 'react-redux';
import { fetchCreatedByEmployee } from '../slice';
import type { AppDispatch, RootState } from '@/store/store';

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

}

const FilterLaunch: React.FC<FilterI> = ({ onSearch, defaultFilter, status, isSuperAdmin }) => {
  const [form] = Form.useForm();
  const dispatch: AppDispatch = useDispatch();
  const [searchValues, setSearchValues] = useState<SearchLaunchValuesI>({
    page: 1,
  });
  const cityOptions = defaultFilter.cities?.map((city) => ({
    value: city.city_id,
    label: city.city_name,
  }));
  const createdByData = useSelector((state: RootState) => state.launches.launchEmpList);
  const createdByOptions = createdByData?.map((user: createdOptionsI) => ({
    value: user?.user_id,
    label: `${user?.first_name} ${user?.last_name} (${user?.role_label})`,
  }));

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

  const statusOptions = [
    { value: 'On', label: 'On' },
    { value: 'Off', label: 'Off' },
  ];

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

  return (
    <Card size="small" className="mb-3">
      <Form form={form} layout="inline" className="custom-filter-horizontal">
        <div className="custom-filter-horizontal-label">
          <Form.Item label="Filter:"></Form.Item>
        </div>
        <div className="custom-filter-horizontal-content">
          <InputSearch
          placeholder='Search by Name'
            onSearch={(search) => {
              const param = {
                ...searchValues,
                search,
              };
              setSearchValues(param);
              onSearch(param);
            }}
            onClear={() => {
              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'}
              />
            )
          )}
          <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="status"
            placeholder="Status"
            style={{ width: '90px' }}
            options={statusOptions}
            onSelect={(value) => {
              const param = {
                ...searchValues,
                status: value,
              };
              setSearchValues(param);
              onSearch(param);
            }}
            disabled={status === 'loading'}
          />
          <InputSearch
            placeholder="Search by Location"
            onSearch={(location) => {
              const param = {
                ...searchValues,
                location,
              };
              setSearchValues(param);
              onSearch(param);
            }}
            onClear={() => {
              const param = {
                ...searchValues,
                location: '',
              };
              setSearchValues(param);
              onSearch(param);
            }}
            className="ml-0"
            disabled={status === 'loading'}
          />
        </div>
      </Form>
    </Card>
  );
};

export default FilterLaunch;