"use client";
import { ChangeEvent, useRef, useState } from "react";
import { useAppSelector } from "@/Redux/Hooks";
import {
  Button,
  Col,
  Form,
  Input,
  Label,
  Row,
} from "reactstrap";
import { Field, Formik } from "formik";
import { NewProjectInitialValue, NewProjectValidation } from "@/Data/Application/Project";
import dynamic from "next/dynamic";

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

const AddSubscriptionForm = () => {
  const [imageUrl, setImageUrl] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const { i18LangStatus } = useAppSelector((state) => state.langSlice);
  const [checked, setchecked] = useState(true)
  const [checkedSuspend, setcheckedSuspend] = useState(true)
  const [customPaymentTerms, setCustomPaymentTerms] = useState(true)
  const getUserData = (event: ChangeEvent<HTMLInputElement>) => {
    const name = event.target.name;
    if (name === "imageUpload") {
      const file = event.target.files?.[0];
      const reader = new FileReader();
      reader.onload = () => {
        const uploadedImageUrl = reader.result as string;
        setImageUrl(uploadedImageUrl);
      };
      if (file) {
        reader.readAsDataURL(file);
      }
    }
    const value =
      name === "agreeTerms" ||
        name === "informationCheckBox" ||
        name === "agreeConditions"
        ? event.target.checked
        : name === "imageUpload" || name === "studentFile"
          ? event.target.files && event.target.files[0].name
          : event.target.value;
  };
  const handleSubmit = (e: any) => {
    e.preventDefault()
  }
  return (
    <>
      <Formik
        initialValues={NewProjectInitialValue}
        validationSchema={NewProjectValidation}
        onSubmit={handleSubmit}
      >
        {() => (
          <Form className="theme-form">
            <Row className="g-3">
              <Col lg="6" sm="6">
                <Label check>
                  Test Period Start Date
                </Label>
                <Input
                  onChange={getUserData}
                  name="testPeriodStartDate"
                  type="date"
                  placeholder="Test Period Start Date"
                />
              </Col>
              <Col xs="6">
                <Label>
                  Test Period End Date
                </Label>
                <Input
                  name="testPeriodEndDate"
                  onChange={getUserData}
                  type="date"
                  placeholder={"Test Period End Date"}
                />
              </Col>
              <Col lg="6" sm="6">
                <Label check>
                  Subscription Period Start Date
                </Label>
                <Input
                  onChange={getUserData}
                  name="testPeriodStartDate"
                  type="date"
                  placeholder="Subscription Period Start Date"
                />
              </Col>
              <Col xs="6">
                <Label>
                  Subscription Period End Date
                </Label>
                <Input
                  name="testPeriodEndDate"
                  onChange={getUserData}
                  type="date"
                  placeholder={"Subscription Period End Date"}
                />
              </Col>
              <Col lg="6" sm="6">
                <Label check>
                  Subscription Start Date
                </Label>
                <Input
                  disabled
                  name="date"
                  onChange={getUserData}
                  type="date"
                />
              </Col>
              <Col lg="6" sm="6">
                <Label check>
                  Payment Terms
                </Label>
                <Field
                  name="language"
                  as="select"
                  className="form-control form-select"
                >
                  <option value={"1"}>Net 30</option>
                  <option value={"2"}>Net 60</option>
                  <option value={"3"}>Net 90</option>
                </Field>
              </Col>
              <Col lg="6" sm="6">
                <div className="d-flex justify-content-between w-100">
                  <Label check>
                    Custom Payment Term
                  </Label>
                  <Field type="checkbox" onClick={() => setCustomPaymentTerms(!customPaymentTerms)} checked={customPaymentTerms} className="me-3" name="toggle" />
                </div>
                <Field
                  name="language"
                  type="date"
                  disabled={!customPaymentTerms}
                  className="form-control "
                >
                </Field>
              </Col>
              <Col lg="6" sm="6">
                <Label check>
                  Invoicing Period
                </Label>
                <Field
                  name="language"
                  as="select"
                  className="form-control form-select"
                >
                  <option value={"1"}>3 Months</option>
                  <option value={"2"}>6 Months</option>
                  <option value={"3"}>9 Months</option>
                  <option value={"4"}>12 Months</option>
                </Field>
              </Col>
              <Col lg="2" sm="2">
                <Label check>
                  Autorenewal
                </Label>
                <br />
                <Field type="checkbox" onClick={() => setchecked(!checked)} checked={checked} name="toggle" />
              </Col>
              <Col lg="4" sm="4">
                <div className="d-flex justify-content-between w-100">
                  <Label check>
                    Suspend
                  </Label>
                  <Field type="checkbox" onClick={() => setcheckedSuspend(!checkedSuspend)} checked={checkedSuspend} className="me-3" name="toggle" />
                </div>
                <Input name="date" disabled={!checkedSuspend} onChange={getUserData} type="date" />
              </Col>
              <Col lg="6" sm="6">
                <Label check>
                  Services Provided
                </Label>
                <Input name="date" onChange={getUserData} type="text" />
              </Col>
              <Col lg="3" sm="4">
                <Label check>
                  Number of Users:
                </Label>
                <Input name="date" onChange={getUserData} 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>
                <Input name="text" className="form-control" type="text" />
              </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="" rows={3} className="form-control" id=""></textarea>
              </Col>
              <Col lg="12" sm="12">
                <Label check>
                  Notes
                </Label>
                <textarea cols={5} rows={5} 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>
        )}
      </Formik>
    </>
  );
};

export default AddSubscriptionForm;