import React from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import MkdSDK from "@/utils/MkdSDK";
import { useNavigate, useParams } from "react-router-dom";
import { tokenExpireError } from "@/context/Auth";
import { GlobalContext, showToast } from "@/context/Global";
import { isImage, empty, isVideo } from "@/utils/utils";
import SkeletonLoader from "@/components/Skeleton/Skeleton";

let sdk = new MkdSDK();

const ViewSettingPage = () => {
  const { dispatch: globalDispatch } = React.useContext(GlobalContext);

  const { dispatch } = React.useContext(GlobalContext);
  const [viewModel, setViewModel] = React.useState({});
  const [loading, setLoading] = React.useState(true);

  const params = useParams();

  React.useEffect(function () {
    (async function () {
      setLoading(true);
      try {
        sdk.setTable("setting");
        const result = await sdk.callRestAPI({ id: Number(params?.id) }, "GET");
        if (!result.error) {
          setViewModel(result.model);
          setLoading(false);
        }
      } catch (error) {
        setLoading(false);

        console.log("error", error);
        tokenExpireError(dispatch, error.message);
      }
    })();
  }, []);
  return (
    <div className=" mx-auto rounded  p-5 shadow-md">
      <h4 className="text-2xl font-medium">View Setting</h4>

      {loading ? (
        <SkeletonLoader />
      ) : (
        <>
          <div className="mb-4 mt-4">
            <div className="mb-4 flex">
              <div className="flex-1">Id</div>
              <div className="flex-1">{viewModel?.id}</div>
            </div>
          </div>

          <div className="mb-4 mt-4">
            <div className="mb-4 flex">
              <div className="flex-1">Setting Key</div>
              <div className="flex-1">{viewModel?.setting_key}</div>
            </div>
          </div>

          <div className="mb-4 mt-4">
            <div className="mb-4 flex">
              <div className="flex-1">Setting Value</div>
              <div className="flex-1">{viewModel?.setting_value}</div>
            </div>
          </div>

          <div className="mb-4 mt-4">
            <div className="mb-4 flex">
              <div className="flex-1">Create At</div>
              <div className="flex-1">{viewModel?.create_at}</div>
            </div>
          </div>

          <div className="mb-4 mt-4">
            <div className="mb-4 flex">
              <div className="flex-1">Update At</div>
              <div className="flex-1">{viewModel?.update_at}</div>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export default ViewSettingPage;
