'use client';
import React, { useEffect } from 'react';
import { Col, Row, Table } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { displayDate } from '@/utills/helper';
import { fetchProject } from '../../slice';
import type { AppDispatch } from '@/store/store';
import AddEditProject from '../../components/AddEditProject';
import FormattedAmount from '@/components/amountFormat/AmountFormatter';

interface PropsI {
    selectedId: number | undefined
    showEditData: boolean
    setShowEditData: any
}

const ProjectInformationPage: React.FC<PropsI> = (props) => {
  const dispatch: AppDispatch = useDispatch();
  const id = props?.selectedId;
  const projectDetails = useSelector((state: any) => state?.launches?.projectId);

  useEffect(() => {
    getProjects(props.selectedId);
  }, [props.selectedId]);

  const getProjects = (pid: number | undefined): void => {
    if (pid) {
      dispatch(fetchProject({ id: pid }))
        .then((res) => {
          console.log('res', res);
        })
        .catch((err) => {
          console.error('err', err);
        });
    }
  };

  const cancelEditProjectDetails = (data: boolean) => {
    props.setShowEditData(data);
  };

  const refreshProjectInfo = () => {
    getProjects(id);
  };

  return (
    <>
      {props?.showEditData ? (
        <AddEditProject
          id={id}
          cancelEditProjectDetails={cancelEditProjectDetails}
          refreshProjectInfo={refreshProjectInfo}
        />
      ) : (
        <div>
          <Row gutter={24}>
            <Col span={24} md={12}>
              <div className="label-value label-width">
                <span className="label-text">Project Name:</span>
                <span className="value-text">{projectDetails?.name}</span>
              </div>
            </Col>
            <Col span={24} md={12}>
              <div className="label-value label-width">
                <span className="label-text">City:</span>
                <span className="value-text">{projectDetails?.city_name}</span>
              </div>
            </Col>
            <Col span={24} md={12}>
              <div className="label-value label-width">
                <span className="label-text">Region:</span>
                <span className="value-text">{projectDetails?.region_name}</span>
              </div>
            </Col>
            <Col span={24} md={12}>
              <div className="label-value label-width">
                <span className="label-text">Builder Name:</span>
                <span className="value-text">{projectDetails?.builder_name}</span>
              </div>
            </Col>
            <Col span={24} md={12}>
              <div className="label-value label-width">
                <span className="label-text">Location:</span>
                <span className="value-text">{projectDetails?.location}</span>
              </div>
            </Col>
            {projectDetails?.localities?.map((locality: React.ReactNode, index: number) => {
              return (
                <Col span={24} md={12} key={index}>
                  <div className="label-value label-width">
                    <span className="label-text">{`Locality ${index + 1}`}:</span>
                    <span className="value-text">{locality}</span>
                  </div>
                </Col>
              );
            })}
            {/* <Col span={24} md={12}>
              <div className="label-value label-width">
                <span className="label-text">Created By:</span>
                <span className="value-text">
                  {projectDetails?.created_by_name}
                </span>
              </div>
            </Col> */}
            <Col span={24} md={12}>
              <div className="label-value label-width">
                <span className="label-text">Creation Date:</span>
                <span className="value-text">
                  {displayDate(projectDetails?.created_at)}
                </span>
              </div>
            </Col>
          </Row>

          {projectDetails?.configuration?.length > 0 ? (
            <Table
              dataSource={projectDetails?.configuration}
              rowKey="id"
              pagination={false}
              bordered
              scroll={{ x: true }}
              columns={[
                {
                  title: 'Configuration',
                  dataIndex: 'configuration_name',
                  key: 'configuration_name',
                },
                {
                  title: 'Ticket Size',
                  dataIndex: 'ticket_size',
                  key: 'ticket_size',
                  render: (text: number) => (
                    <>
                      <FormattedAmount amount={text} />
                    </>
                  ),
                },
              ]}
            />
          ) : null}
        </div>
      )}
    </>
  );
};
export default ProjectInformationPage;