import React, { useEffect, useState } from 'react';
import { Modal, Form, Spin, notification } from 'antd';
import { addCluster, editCluster } from '../service';
import { useSelector } from 'react-redux';
import type { RootState } from '@/store/store';
import InputText from '../../../components/form/InputText';
import type { ModalBoxProps } from '../interface';
import InputSelect from '../../../components/form/InputSelect';

const ModalBox: React.FC<ModalBoxProps> = ({ isModalOpen, handleClose, handleOk, data }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const { cities } = useSelector((state: RootState) => state.cluster);
  const modalTitle = data !== null && data !== undefined ? 'Edit Cluster' : 'Add New Cluster';
  const cityOptions = cities?.map((city) => ({ value: city.id, label: city.name }));
  const statusOptions = [
    { value: 1, label: 'Active' },
    { value: 2, label: 'Inactive' },
  ];

  // Set form values on component update
  useEffect(() => {
    if (data !== null && data !== undefined) {
      form.setFieldsValue({
        city: data.city_name,
        name: data.name,
        status: data.status,
      });
    } else {
      form.resetFields();
    }
  }, [data, form]);

  const onFinish = (values: { name: string; status: boolean; city_id: number; city: string; }): void => {
    setLoading(true);

    if (data !== null && data !== undefined) {
      // Edit existing cluster
      editCluster(data.id, {
        name: values.name,
        status: values.status,
        city_id: values.city_id,
      })
        .then((response) => {
          const { message } = response.data;
          notification.success({
            message: 'Success',
            description: message,
          });
          form.resetFields();
          handleOk();
        })
        .catch((error) => {
          notification.error({
            message: error,
            description: 'There was an error processing your request.',
          });
        })
        .finally(() => {
          setLoading(false);
        });
    } else {
      // Add new cluster
      addCluster({
        name: values.name,
        status: values.status,
        city_id: values.city,
      })
        .then((response) => {
          const { message } = response.data;
          notification.success({
            message: 'Success',
            description: message,
          });
          form.resetFields();
          handleOk();
        })
        .catch((error) => {
          notification.error({
            message: error,
            description: 'There was an error processing your request.',
          });
        })
        .finally(() => {
          setLoading(false);
        });
    }
  };

  return (
    <Modal
      title={modalTitle}
      open={isModalOpen}
      onOk={() => {
        form.submit();
      }}
      onCancel={handleClose}
      confirmLoading={loading}
      className="custom-new-modal">
      <Spin spinning={loading}>
        <Form
          form={form}
          onFinish={onFinish}
          colon={false}
          labelAlign="left"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}>
          <InputSelect
            name="city"
            label="City"
            placeholder=""
            rules={[{ required: true, message: 'Please Select a City!' }]}
            options={cityOptions}
            onSelect={(value) => {
              form.setFieldsValue({ city: value });
            }}
            isSearchable={true}
          />
          <InputText
            name="name"
            label="Name"
            rules={[{ required: true, message: 'Please input your name!' }]}
          />
          <InputSelect
            name="status"
            placeholder=""
            label="Status"
            rules={[{ required: true, message: 'Please Select a Status!' }]}
            options={statusOptions}
            onSelect={(value) => {
              form.setFieldsValue({ status: value });
            }}
          />
        </Form>
      </Spin>
    </Modal>
  );
};

export default ModalBox;