import React, { useEffect, useState } from 'react';
import { Modal, Form, Spin, notification } from 'antd';
import { addCities, updateCities } from '../service';
import type { ModalBoxProps } from '../interface';
import InputText from '../../../components/form/InputText';
import { userNameValidator } from '@/utills/validator';

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

  // Determine modal title based on data presence
  const modalTitle = data !== undefined && data !== null ? 'Edit City' : 'Add New City';

  // Set form fields based on data
  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]);

  // Form submit handler
  const onFinish = (values: { name: string; }): void => {
    setLoading(true);
    try {
      if (data !== null) {
        updateCities(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 {
        addCities({
          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}
      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: userNameValidator('City') }]}
          />
        </Form>
      </Spin>
    </Modal>
  );
};

export default ModalBox;