"use client";
import { ChangeEvent, useEffect, useState } from "react";
import { useAppSelector } from "@/Redux/Hooks";
import {
  Button,
  Card,
  CardBody,
  Col,
  Form,
  Input,
  Label,
  Row,
} from "reactstrap";
import Select from 'react-select'
import { toast } from "react-toastify";
import DataService from "@/Config/Axios";
import dynamic from "next/dynamic";
import { InvoiceInitialValue, InvoiceRowDataProp } from "@/Types/InvoiceType";

const Breadcrumbs = dynamic(() => import("@/CommonComponent/Breadcrumbs"), { ssr: false })

const AddSubscriptionForm = () => {
  const { i18LangStatus } = useAppSelector((state) => state.langSlice);
  const [checked, setchecked] = useState(true);
  const [checkedSuspend, setcheckedSuspend] = useState(true);
  const [customPaymentTerms, setCustomPaymentTerms] = useState(true);
  const [data, setData] = useState<any>({})
  const [invoices, setInvoices] = useState([])
  const [invoicesOptions, setInvoicesOptions] = useState([])
  const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = event.target;
    setData({ ...data, [name]: value })
  };
  const callApi = async () => {
    try {
      const response = await DataService.post('/invoices');
      const formattedInvoices = await response.data.data.map((invoice: InvoiceRowDataProp) => ({
        label: invoice.invoiceNumber,
        value: invoice._id
      }));
      setInvoices(response.data.data);
      setInvoicesOptions(formattedInvoices);
    } catch (error: any) {
      toast.error(error?.response?.data?.message ?? "Something went wrong!");
    }
  }
  useEffect(() => {
    callApi()
  }, [])

  const handleReactSelectChange = (name: string, value: string) => {
    setData({ ...data, [name]: value })
  }

  const handleSubmit = (e: any) => {
    e.preventDefault();
    console.log(data)
  };

  console.log(data)
  return (
    <Form className="theme-form" onSubmit={handleSubmit}>
      <Row className="g-3">
        <Col lg="6" sm="6">
          <Label check>Test Period Start Date</Label>
          <Input
            onChange={handleChange}
            name="testPeriodStartDate"
            type="date"
            placeholder="Test Period Start Date"
          />
        </Col>
        <Col xs="6">
          <Label>Test Period End Date</Label>
          <Input
            name="testPeriodEndDate"
            onChange={handleChange}
            type="date"
            placeholder={"Test Period End Date"}
          />
        </Col>
        <Col lg="6" sm="6">
          <Label check>Subscription Period Start Date</Label>
          <Input
            onChange={handleChange}
            name="subscriptionPeriodStartDate"
            type="date"
            placeholder="Subscription Period Start Date"
          />
        </Col>
        <Col xs="6">
          <Label>Subscription Period End Date</Label>
          <Input
            name="subscriptionPeriodEndDate"
            onChange={handleChange}
            type="date"
            placeholder={"Subscription Period End Date"}
          />
        </Col>
        <Col lg="6" sm="6">
          <Label check>Payment Terms</Label>
          <Select
            onChange={(e: any) => handleReactSelectChange('paymentTerms', e.value)}
            name="paymentTerms"
            options={[{ label: "Net 30", value: "1" }, { label: "Net 60", value: "2" }, { label: "Net 90", value: "3" },]}
          />
        </Col>
        <Col lg="6" sm="6">
          <div className="d-flex justify-content-between w-100">
            <Label check>Custom Payment Term</Label>
            <Input
              type="checkbox"
              onClick={() =>
                setCustomPaymentTerms(!customPaymentTerms)
              }
              checked={customPaymentTerms}
              className="customPaymentTerm"
              name="toggle"
            />
          </div>
          <Input
            name="language"
            type="date"
            disabled={!customPaymentTerms}
            className="form-control "
          ></Input>
        </Col>
        <Col lg="6" sm="6">
          <Label check>Invoicing Period</Label>
          <Select
            name="invoicingPeriodMonths"
            onChange={(e: any) => handleReactSelectChange('invoicingPeriodMonths', e.value)}
            className=""
            options={[{ value: "3", label: "3 Months" }, { value: "6", label: "6 Months" }, { value: "9", label: "9 Months" }, { value: "12", label: "12 Months" },]}
          />
        </Col>
        <Col lg="2" sm="2">
          <Label check>Autorenewal</Label>
          <br />
          <Input
            type="checkbox"
            onClick={() => setchecked(!checked)}
            checked={checked}
            name="autoRenewal"
          />
        </Col>
        <Col lg="4" sm="4">
          <div className="d-flex justify-content-between w-100">
            <Label check>Suspend</Label>
            <Input
              type="checkbox"
              onClick={() => setcheckedSuspend(!checkedSuspend)}
              checked={checkedSuspend}
              className="me-3"
              name="suspendDate"
            />
          </div>
          <Input
            name="date"
            disabled={!checkedSuspend}
            onChange={handleChange}
            type="date"
          />
        </Col>
        <Col lg="6" sm="6">
          <Label check>Services Provided</Label>
          <Input name="servicesProvided" onChange={handleChange} type="text" />
        </Col>
        <Col lg="3" sm="4">
          <Label check>Number of Users:</Label>
          <Input name="numberOfUsers" onChange={handleChange} type="number" />
        </Col>
        <Col lg="3" sm="4">
          <Label check>Signed Order Form</Label>
          <Input name="date" className="form-control" type="file" />
        </Col>
        <Col lg="3" sm="4">
          <Label check>Invoice Issued</Label>
          <Select name="invoicesIssued"
            onChange={(e: any) => handleReactSelectChange('invoicesIssued', e.value)}
            options={invoicesOptions} />
        </Col>
        <Col lg="3" sm="4">
          <Label check>Issued Invoice Document</Label>
          <Input name="text" className="form-control" type="file" />
        </Col>
        <Col lg="3" sm="4">
          <Label check>Amount</Label>
          <Input name="amount" className="form-control" type="number" />
        </Col>
        <Col lg="12" sm="12">
          <Label check>Comment</Label>
          <textarea
            name="comment"
            rows={3}
            className="form-control"
            onChange={handleChange}
            id=""
          ></textarea>
        </Col>
        <Col lg="12" sm="12">
          <Label check>Notes</Label>
          <textarea
            cols={5}
            rows={5}
            name="notes"
            onChange={handleChange}
            className="form-control"
          ></textarea>
        </Col>
        <Col xs="12" className="d-flex justify-content-end gap-2">
          <Button color="primary" className="" onClick={() => { }}>
            Submit
          </Button>
          <Button
            color="link"
            className="btn btn-outline-primary"
            href={`/${i18LangStatus}/subscriptions`}
          >
            Cancel
          </Button>
        </Col>
      </Row>
    </Form>
  );
};

export default AddSubscriptionForm;