// 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 { getCreatedByLeadRequest, getLaunchesAndProjectsLeadRequest } from '../service';
interface FilterI {
    onSearch: (filter: any) => void
    cities?: { city_name: string; city_id: number }[]
}
interface options {
    value: number | string
    label: string
}
const FilterLeadRequests: React.FC<FilterI> = ({ onSearch }) => {
  const [form] = Form.useForm();
  const [createdByOptions, setCreatedByOptions] = useState<options[]>([]);
  const [launchesOptions, setLaunchesOptions] = useState<options[]>([]);
  const [projectsOptions, setProjectsOptions] = useState<options[]>([]);

  const getCreatedBy = async() => {
    const by = await getCreatedByLeadRequest();
    if (by.data) {
      const options = by.data.map((i: { full_name: string; role_label: string; id: string; }) => ({
        label: `${i.full_name} - (${i.role_label})`,
        value: i.id,
      }));
      setCreatedByOptions(options);
    }
  };

  const getLaunchesAndProjects = async() => {
    const by = await getLaunchesAndProjectsLeadRequest();
    if (by.data?.project_data) {
      const options = by.data?.project_data.map((i: { project_name: string; project_id: string; }) => ({
        label: i.project_name,
        value: i.project_id,
      }));
      setProjectsOptions(options);
    }
    if (by.data?.launch_data) {
      const options2 = by.data?.launch_data.map((i: { launch_name: string; launch_id: string; }) => ({
        label: i.launch_name,
        value: i.launch_id,
      }));

      setLaunchesOptions(options2);
    }
  };
  useEffect(() => {
    getCreatedBy();
    getLaunchesAndProjects();
  }, []);

  const leadStatus = [
    { value: 1, label: 'All leads except fake & broker' },
    { value: 2, label: 'Visit done but not booked' },
  ];

  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) => {
              onSearch({ search });
            }}
            onClear={() => {
              onSearch({ search: null });
            }}
            className="ml-0"
          />
          <InputSelect
            options={launchesOptions}
            onSelect={(value) => {
              onSearch({ launch_id: value });
            }}
            name="launch_id"
            style={{ width: 200 }}
            placeholder="Launch"
            onClear={() => {
              onSearch({ launch_id: null });
            }}
          />

          <InputSelect
            options={projectsOptions}
            onSelect={(value) => {
              onSearch({ project_id: value });
            }}
            name="project_id"
            style={{ width: 200 }}
            placeholder="Project"
            onClear={() => {
              onSearch({ project_id: null });
            }}
          />
          <InputSelect
            options={leadStatus}
            onSelect={(value) => {
              onSearch({ lead_status_id: value });
            }}
            name="leadStatus"
            style={{ width: 200 }}
            placeholder="Lead Status"
            onClear={() => {
              onSearch({ lead_status_id: null });
            }}
          />

          <InputSelect
            showSearch
            options={createdByOptions}
            onSelect={(value) => {
              onSearch({ created_by: value });
            }}
            name="created_by"
            style={{ width: 200 }}
            placeholder="Requested By"
            onClear={() => {
              onSearch({ created_by: null });
            }}
          />
        </div>
      </Form>
    </Card>
  );
};

export default FilterLeadRequests;