import React, { useEffect, useState } from 'react';
import { Button, Form, Modal, notification } from 'antd';
import TextareaInput from '@/components/form/InputTextArea';
import { updateLeads } from '../service';
import { LEADS_STATUS } from '@/utills/constant';
import { leadRemarkValidator } from '@/utills/validator';

interface ActionFormProps {
    id?: number | string
    data: any
    getLeadInfo: ({ id }: { id: string }) => void
}

const BookingCancellation: React.FC<ActionFormProps> = ({ id, data, getLeadInfo }) => {
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  const [submitionLoading, setSubmitionLoading] = useState<boolean>(false);
  const [form] = Form.useForm();

  // Reset form fields when modal visibility changes
  useEffect(() =>{
    form.resetFields();
  }, [isModalVisible]);

  // Function to show modal
  const showModal = () => {
    setIsModalVisible(true);
  };

  // Function to handle modal cancellation
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  // Function to handle form submission
  const onFinish = async() => {
    await form
      .validateFields()
      .then(async(values) => {
        form.resetFields();

        setSubmitionLoading(true);
        const postData = {
          lead_id: id,
          project_id: data.project_id,
          meta_data: {
            status_id: LEADS_STATUS.bookingCancelled.id,
            remark: values.remark,
          },
        };
        await updateLeads(postData)
          .then((res) => {
            notification.success({
              message: 'Success',
              description: res?.message,
            });
            getLeadInfo({ id: data.id });
            setIsModalVisible(false);
          })
          .catch((err) => {
            console.error('err: ', err);
            notification.error({
              message: 'Error',
              description: err?.response.data?.message,
            });
          });
        setSubmitionLoading(false);
      })
      .catch((info) => {
        console.error('Validate Failed:', info);
      });
  };

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        marginTop: '20px',
      }}>
      <Button type="primary" danger onClick={showModal}>
                Booking Cancellation
      </Button>

      <Modal
        title="Booking Cancellation"
        open={isModalVisible}
        onOk={onFinish}
        okText={'Submit'}
        confirmLoading={submitionLoading}
        onCancel={handleCancel}>
        <p>You are making booking cancellation.</p>
        <p className="mb-5">Please enter the reason for it:</p>
        <Form form={form} name="cancellation" layout='vertical'>
          <TextareaInput
            name="remark"
            label="Remark"
            placeholder="Remark"
            rows={5}
            rules={[
              {
                required: true,
                validator: leadRemarkValidator('Remark'),
              },
            ]}
          />
        </Form>
      </Modal>
    </div>
  );
};

export default BookingCancellation;