"use client";
import { ChangeEvent, useRef, useState } from "react";
import { useAppDispatch, useAppSelector } from "@/Redux/Hooks";
import {
  Button,
  Card,
  CardBody,
  Col,
  Form,
  Input,
  Label,
  Row,
} from "reactstrap";
import dynamic from "next/dynamic";

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

const UpdateSubscriptionPlanForm = () => {
  const [imageUrl, setImageUrl] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const { i18LangStatus } = useAppSelector((state) => state.langSlice);

  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;
  };
  return (
    <>
      <Breadcrumbs pageTitle="Edit Subscription" parent="Receipt" />
      <Col xl={12} className="mx-auto">
        <Card className="height-equal">
          {/* <CommonCardHeader title="Edit Receipt" /> */}
          <CardBody className="custom-input">
            <Form onSubmit={(e) => e.preventDefault()} className="form-wizard">
              <Row className="g-3">
                <Col lg="6" sm="6">
                  <Label check>
                    Stripe Plan ID
                    <span className="txt-danger">*</span>
                  </Label>
                  <Input
                    onChange={getUserData}
                    name="receiptNumber"
                    type="text"
                    placeholder='Stripe Plan ID'
                  />
                </Col>
                <Col xs="6">
                  <Label>
                    Plan Name
                    <span className="txt-danger">*</span>
                  </Label>
                  <Input
                    name="status"
                    onChange={getUserData}
                    type="text"
                    placeholder={"Plan Name"}
                  />
                </Col>
                <Col lg="6" sm="6">
                  <Label check>
                    Purchase Date
                    <span className="txt-danger">*</span>
                  </Label>
                  <Input disabled name="date" onChange={getUserData} type="date" />
                </Col>
                <Col lg="6" sm="6">
                  <Label check>
                    Valid Till
                    <span className="txt-danger">*</span>
                  </Label>
                  <Input name="date" onChange={getUserData} type="date" />
                </Col>

                <Col xs="12" className="d-flex justify-content-end gap-2">
                  <Button color="primary" className="" onClick={() => { }}>
                    Update
                  </Button>
                  <Button
                    className="btn btn-danger"
                    href={`/${i18LangStatus}/subscriptions/plans`}
                  >
                    Cancel
                  </Button>
                </Col>
              </Row>
            </Form>
          </CardBody>
        </Card>
      </Col>
    </>
  );
};

export default UpdateSubscriptionPlanForm;