import React, { useEffect, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { object, string, SchemaOf } from "yup";
import { FormLabel, FormControl, Button } from "react-bootstrap";
import { useSession } from "next-auth/react";
import { SubscriptionUpdate, Subscription } from "../../../services/profile";
import { ScaleLoader } from "react-spinners";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";  
import { useRouter } from "next/router";

interface FormData {
  max_clild: string;
  advance_child_limit: string;
  is_verify: string;
}
const schema: SchemaOf<FormData> = object().shape({
  max_clild: string().required(" Associated users is required"),
  advance_child_limit: string().required("Advance users is required"),
});
function SubscriptionDetails(props: any): JSX.Element {
  const [isloading, setIsloading] = useState(false);

  const router = useRouter();
  const userId = router?.query?.id;
  const [disabled, setDisabled] = useState(true);
  const [premium, setIsPremium] = useState();
  const [verify, setVerify] = useState()
  const { data } = useSession();
  const token = data?.user?.image;

  function prefillData(userDetails: any) {
    setValue("max_clild", userDetails?.max_clild);
    setValue("advance_child_limit", userDetails?.advance_child_limit);

    setValue("is_verify", userDetails?.is_verify === 1 ?1:0 );
    setVerify(userDetails?.is_premium === 1 ? true : false);
    setIsPremium(userDetails?.is_premium === 1 ? true : false);
  }
  useEffect(() => {
    prefillData(props?.prop?.data?.details?.subscription_info);
  }, [props?.prop?.data?.details?.subscription_info]);
  const {
    handleSubmit,
    control,
    setValue,
    formState: { errors },
  } = useForm<FormData>({
    resolver: yupResolver(schema),
  });

  const handleSubscriptionUpdate = async (accesstoken: any, payload: any) => {
    const response = await SubscriptionUpdate(accesstoken, payload);
    if (response?.status === "success") {
      toast.success(response.message, {
        position: toast.POSITION.TOP_CENTER,
      });
      props.setRefresh(true);
      setDisabled(true);
    } else {
      toast.error(response.message, {
        position: toast.POSITION.TOP_CENTER,
      });
    }
  };
  const onSubmit = async (payload: FormData) => {
    payload.user_id = userId;

    await handleSubscriptionUpdate(token, payload);
  };

  const SendSubscription = async () => {
    setIsloading(true)
    let payload = {
      user_id: userId,
      is_premium: premium ? 0 : 1,
    };
    const res = await Subscription(token, payload);
    if (res?.status === "success") {
      toast.success(res.message, {
        position: toast.POSITION.TOP_CENTER,
      });
      props.setRefresh(true);
      setIsloading(false)

    }

    prefillData(props?.prop?.data?.details?.subscription_info);
  };
  const EditButtonOrCancel = ({ DetailingCondition }) => {
    if (DetailingCondition) {
      return null;
    }

    return disabled ? (
      <div className='edit_btn_block' onClick={() => setDisabled(!disabled)}>
        <a className='btn_edit'>
          <span>
            <svg
              xmlns='http://www.w3.org/2000/svg'
              width='14'
              height='15'
              viewBox='0 0 14 15'
              fill='#060707'
            >
              <g clipPath='url(#clip0_1098_1233)'>
                <path
                  d='M8.20167 5.76167L8.73833 6.29833L3.45333 11.5833H2.91667V11.0467L8.20167 5.76167ZM10.3017 2.25C10.1558 2.25 10.0042 2.30833 9.89333 2.41917L8.82583 3.48667L11.0133 5.67417L12.0808 4.60667C12.3083 4.37917 12.3083 4.01167 12.0808 3.78417L10.7158 2.41917C10.5992 2.3025 10.4533 2.25 10.3017 2.25ZM8.20167 4.11083L1.75 10.5625V12.75H3.9375L10.3892 6.29833L8.20167 4.11083Z'
                  fill='#060707'
                />
              </g>
              <defs>
                <clipPath id='clip0_1098_1233'>
                  <rect
                    width='14'
                    height='14'
                    fill='white'
                    transform='translate(0 0.5)'
                  />
                </clipPath>
              </defs>
            </svg>
          </span>{" "}
          Edit
        </a>
      </div>
    ) : (
      <div style={{ textAlign: "end" }}>
        <button
          onClick={() => {setDisabled(!disabled); props?.setRefresh(true);}}
          type='button'
          className='btn btn-primary'
        >
          Cancel
        </button>
        
      </div>
    );
  };
const [collapsed,setCollapsed] = useState(false)
  const shouldRenderVerification = props?.query === "carrier" && verify;
  const isDisabled = props?.DetailingCondition || disabled;



  return (
    <div className="details_bot">
      <div className='profile_edit_body-detail accordion_cls my-3'>
        {isloading && (
          <div id='loader_table'>
            <ScaleLoader color='#3180f3' style={{ marginTop: "90px", marginLeft: "50px" }} className='table_loader' />
          </div>
        )}
        <div onClick={() => setCollapsed(!collapsed)} className='profile_heading-general link_general'>
          <h3>Subscription Details</h3>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
            <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
          </svg>
        </div>
        {collapsed ? <div>

          <ToastContainer />
          <EditButtonOrCancel

            DetailingCondition={props?.DetailingCondition}
          />
          <form
            className='row g-4'
            style={{ justifyContent: "flex-start" }}
            onSubmit={handleSubmit(onSubmit)}
          >
            <div className='col-md-6  '>
              <div
                className='select_group '
                style={{
                  display: "flex",
                  gap: "10px",
                  justifyContent: "flex-start",
                  display: "flex",
                  alignItems: "center",
                  minWidth: "120px",
                  width: "100%",
                }}
              >
                <FormLabel htmlFor='inputbilling_city'>
                  Subscription&nbsp;Type:
                </FormLabel>
                <div className='form-check'>
                  <input
                    disabled={isDisabled}
                    checked={!premium}
                    className='form-check-input'
                    type='radio'
                    name='flexRadioDefault'
                    id='flexRadioDefault1'
                    onChange={() => {
                      setIsPremium(false);
                      SendSubscription();
                    }}
                  />
                  <label
                    className='form-check-label'
                    htmlFor='flexRadioDefault1'
                  >
                    Free
                  </label>
                </div>

                <div className='form-check'>
                  <input
                    disabled={isDisabled}
                    checked={premium}
                    className='form-check-input'
                    type='radio'
                    name='flexRadioDefault'
                    id='flexRadioDefault2'
                    onChange={() => {
                      setIsPremium(true as any)
                      SendSubscription()
                    }}
                  />
                  <label
                    className='form-check-label'
                    htmlFor='flexRadioDefault2'
                  >
                    Premium
                  </label>
                </div>
              </div>
            </div>
            <div
              className='col-md-3  '
              style={{
                display: "flex",
                gap: "10px",
                justifyContent: "center",
                display: "flex",
                alignItems: "center",
              }}
            >
              {shouldRenderVerification && (
        <div className='form-check'>
          <Controller
            name='is_verify'
            control={control}
            defaultValue={0}
            render={({ field }) => (
              <div className='form-check'>
                <label
                  className='form-check-label'
                  htmlFor='flexCheckDisabled'
                >
                  Verification:
                </label>
                <input
                  disabled={disabled}
                  className='form-check-input'
                  type='checkbox'
                  id='flexCheckDisabled'
                  {...field}
                  checked={field.value === 1}
                  onChange={(e) =>
                    field.onChange(e.target.checked ? 1 : 0)
                  }
                />
              </div>
            )}
          />
        </div>
      )}
            </div>
            <div className='col-md-6  '>
              <div
                className='select_group '
                style={{
                  display: "flex",
                  gap: "10px",
                  justifyContent: "flex-start",
                  display: "flex",
                  alignItems: "center",
                  minWidth: "120px",
                  width: "100%",
                }}
              >
                <FormLabel htmlFor='inputmax_clild'>
                  Associated&nbsp;Users&nbsp;Limit:
                </FormLabel>
                <div style={{ width: "100%" }}>
                  <Controller
                    name='max_clild'
                    control={control}
                    render={({ field }) => (
                      <FormControl
                        disabled={disabled}
                        type='text'
                        className={`form-control ${errors.max_clild ? "is-invalid" : ""
                          }`}
                        id='inputmax_clild'
                        {...field}
                      />
                    )}
                  />
                </div>
              </div>
              {errors.max_clild && (
                <p className='text-danger'>{errors.max_clild.message}</p>
              )}
            </div>
            <div className='col-md-5'>
              <div
                className='select_group '
                style={{
                  display: "flex",
                  gap: "5px",
                  justifyContent: "center",
                  display: "flex",
                  alignItems: "baseline",
                }}
              >
                <FormLabel htmlFor='inputbilling_state_code'>
                  Advanced&nbsp;Users&nbsp;Limit:
                </FormLabel>
                <div style={{ width: "100%" }}>
                  <Controller
                    name='advance_child_limit'
                    control={control}
                    render={({ field }) => (
                      <FormControl
                        disabled={disabled}
                        type='text'
                        className={`form-control ${errors.advance_child_limit ? "is-invalid" : ""
                          }`}
                        id='inputadvance_child_limit'
                        {...field}
                      />
                    )}
                  />
                </div>
              </div>
              {errors?.advance_child_limit && (
                <p className='text-danger'>
                  {errors?.advance_child_limit.message}
                </p>
              )}
            </div>
            <div className='col-12 primary-save'>
              <Button
                hidden={disabled}
                type='submit'
                className='btn btn-primary'
              >
                Update
              </Button>
            </div>
          </form>
        </div>:""}
    
      </div>
    </div>
  );
}

export default SubscriptionDetails;