'use client';
import type { AppDispatch, RootState } from '@/store/store';
import { Table } from 'antd';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { displayDate } from '@/utills/helper';
import type { ColumnsType } from 'antd/es/table';
import type { leadColumnI } from '../interface';
import { fetchLeadRequestByLaunch } from '../slice';

interface PropsI {
    launchId: number | string
}

const LeadRequestsPage: React.FC<PropsI> = (props) => {
  const dispatch: AppDispatch = useDispatch();
  const allLeadRequests = useSelector((state: RootState) => state?.launches?.leadList);

  useEffect(() => {
    fetchLeads(props.launchId);
  }, []);

  const fetchLeads = (launchId: number | string): void => {
    dispatch(fetchLeadRequestByLaunch({ id: launchId }));
  };

  const columns: ColumnsType<leadColumnI> = [
    {
      title: 'Project',
      dataIndex: 'project_name',
      key: 'project_name',
      render: (text: string) => text,
    },
    {
      title: 'Lead Status',
      dataIndex: 'lead_status_name',
      key: 'lead_status_name',
    },
    {
      title: 'Lead/Day',
      dataIndex: 'lead_count',
      key: 'lead_count',
    },
    {
      title: 'Lead Start Date',
      dataIndex: 'created_at',
      key: 'created_at',
      render: (text: Date) => displayDate(text),
    },
    {
      title: 'Requested By',
      dataIndex: 'created_by_name',
      key: 'created_by_name',
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      render: (text: string) => (
        <span>{text.charAt(0).toUpperCase() + text.slice(1)}</span>
      ),
    },
  ];

  return (
    <>
      <Table
        columns={columns}
        dataSource={allLeadRequests}
        rowKey="id"
        pagination={false}
        bordered
        tableLayout="fixed"
        scroll={{ x: true }}
        className="table-layout-fixed"
      />
    </>
  );
};

export default LeadRequestsPage;