"use client";
import Link from "next/link";
import DataService from "@/Config/Axios";
import { useParams, useRouter } from "next/navigation";
import { useAppSelector } from "@/Redux/Hooks";
import { Button, Col, Row, } from "reactstrap";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import { NewAdminInitialValue } from "@/Data/Application/Admin";
import SubscriptionDetailSection from "./SubscriptionDetailSection";
import dynamic from "next/dynamic";
import SweetAlert from "sweetalert2";
import { ThemePrimary } from "@/Constant";

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

const SubscriptionsView = () => {
  const router = useRouter();
  const { i18LangStatus } = useAppSelector((state) => state.langSlice);
  const [data, setData] = useState(NewAdminInitialValue.subscription)
  const params = useParams();

  const callApi = async () => {
    try {
      const response = await DataService.post(`/subscriptions/${params.id}`)
      console.log(response.data.data)
      setData(response.data.data)
    } catch (error: any) {
      toast.error(error.response.data.message)
    }
  }
  useEffect(() => {
    callApi()
  }, [])
  const suspendUser = async () => {
    try {
      const response = await DataService.post(`/auth/suspend/${params.id}`);
      if (response.data.status) {
        toast.success(response.data.message)
      }
    } catch (error: any) {
      toast.error(error.response.data.message)
    }
  }
  const ActivateUser = async () => {
    try {
      const response = await DataService.post(`/auth/activate/${params.id}`);
      if (response.data.status) {
        toast.success(response.data.message)
        callApi()

      }
    } catch (error: any) {
      toast.error(error.response.data.message)
    }
  }
  const displayAlert = () => {
    SweetAlert.fire({
      text: "Are you sure you want to suspend this record?",
      showCancelButton: true,
      cancelButtonText: "Cancel!",
      confirmButtonText: "Confirm",
      confirmButtonColor: ThemePrimary,
    }).then(async (result) => {
      if (result.value) {
        await suspendUser()
        callApi()
        router.refresh()
      } else {
      }
    });
  };
  return (
    <>
      <Breadcrumbs pageTitle={"Subscription Details"} parent="Subscriptions" />
      <Row className="my-3 ">
        <Col className="d-flex justify-content-end">
          {
            data?.status == 'active' ?
              <Button color="primary"
                className="btn btn-primary me-3"
                onClick={displayAlert}
              >
                Suspend
              </Button>
              :
              <Button color="primary"
                onClick={ActivateUser}
                className="btn btn-primary me-3"
              >
                Activate
              </Button>
          }
        </Col>
      </Row>
      <SubscriptionDetailSection data={data} />
    </>
  );
};

export default SubscriptionsView;