import React, { useEffect, useState } from 'react';
import { Modal, Form, Spin, notification } from 'antd';
import { addConfiguration, updateConfiguration } from '../service';

import type { ModalBoxProps } from '../interface';
import InputText from '../../../components/form/InputText';
import { configurationNameValidator } from '@/utills/validator';

const ModalBox: React.FC<ModalBoxProps> = ({ isModalOpen, handleClose, handleOk, data }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // Explicitly checking if data is defined
  const modalTitle = data === null ? 'Add New Configuration' : 'Edit Configuration';

  useEffect(() => {
    if (data !== null && typeof data === 'object' && 'name' in data && 'status' in data) {
      form.setFieldsValue({
        name: data.name,
        status: data.status,
      });
    } else {
      form.resetFields();
    }
  }, [data, form]);

  const onFinish = (values: { name: string; }): void => {
    setLoading(true);

    try {
      if (data !== null) {
        updateConfiguration(data.id, {
          name: values.name,
          status: 'active',
        })
          .then((response) => {
            const { message } = response.data;
            notification.success({
              message: 'Success',
              description: message,
            });

            form.resetFields();
            handleOk();
          })
          .catch((error) => {
            const { message } = error?.response?.data || {};
            notification.error({
              message: 'Error',
              description: message,
            });
          });
      } else {
        addConfiguration({
          name: values.name,
          status: 'active',
        })
          .then((response) => {
            const { message } = response.data;
            notification.success({
              message: 'Success',
              description: message,
            });

            form.resetFields();
            handleOk();
          })
          .catch((error) => {
            const { message } = error?.response?.data || {};
            notification.error({
              message: 'Error',
              description: message,
            });
          });
      }
    } catch (error) {
      console.error('Non-promise error:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      title={modalTitle}
      open={isModalOpen} // Correcting the prop name
      onOk={() => {
        form.submit();
      }}
      okText={data !== null ? 'Update' : 'Save'}
      onCancel={() => {
        form.resetFields();
        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 }}>
          <InputText
            name="name"
            label="Name"
            placeholder="Name"
            rules={[
              {
                required: true,
                validator: configurationNameValidator('Configuration'),
              },
            ]}
          />
        </Form>
      </Spin>
    </Modal>
  );
};

export default ModalBox;