"use client";
import { useAppSelector } from "@/Redux/Hooks";
import { Button, Col, Form, Modal, ModalBody, Row } from "reactstrap";
import { ChangeEvent, SyntheticEvent, useEffect, useState } from "react";
import { toast } from "react-toastify";
import { NewAdminInitialValue } from "@/Data/Application/Admin";
import DataService from "@/Config/Axios";
import { StepperHorizontalPropsType } from "@/Types/FormType";
import { AdminInitialValue } from "@/Types/AdminType";
import { useParams } from "next/navigation";
import BasicInfoForm from "../AddForm/BasicInfo";
import BankDetailsForm from "../AddForm/BankDetails";
import SubscriptionForm from "../AddForm/Subscription";
import ReviewForm from "../AddForm/Review";

const StepperHorizontal:
    React.FC<StepperHorizontalPropsType | any> =
    ({ level, setNumberLevel }) => {
        const StepperHorizontalData = [
            "Basic Info",
            "Bank Details",
            "Subscription",
            "Review"
        ];
        return (
            <div className="stepper-horizontal custom-scrollbar">
                {StepperHorizontalData.map((data, index) => (
                    <div key={index}
                        className={`stepper-one stepper step ${level > index + 1 ? "done active " : ""}`}
                    >
                        <div
                            onClick={() => setNumberLevel(index + 1)}
                            className="step-circle"
                            style={{ cursor: 'pointer' }}
                        >
                            <span>{index + 1}</span>
                        </div>
                        <div
                            onClick={() => setNumberLevel(index + 1)}
                            className="step-title"
                            style={{ cursor: 'pointer' }}
                        >
                            {data}
                        </div>
                        <div className="step-bar-left" />
                        <div className="step-bar-right" />
                    </div>
                ))}
            </div>
        );
    };


const AdministratorUpdateForm = () => {
    const { i18LangStatus } = useAppSelector((state) => state.langSlice);
    const [isOpen, setIsOpen] = useState(false);
    const [tempPass, setTempPass] = useState("");
    const [data, setData] = useState<AdminInitialValue>(NewAdminInitialValue);
    const [subscriptionDetails, setSubscriptionDetails] =
        useState<AdminInitialValue['subscription']>(NewAdminInitialValue.subscription);
    const [loading, setloading] = useState(false)
    const [numberLevel, setNumberLevel] = useState(1)
    const [isIncomplete, setIsIncomplete] = useState(true)
    const params = useParams()

    const nextStep = () => {
        setNumberLevel(numberLevel + 1);
    }
    const toggleComplete = (state: boolean) => setIsIncomplete(state)
    const prevStep = () => {
        setNumberLevel(numberLevel - 1);
    }
    const toggleAutoRenewal = () => {
        setData({
            ...data,
            subscription:
            {
                ...data.subscription,
                autoRenewal: !data.subscription.autoRenewal
            }
        })
    }
    const toggleSuspend = () => {
        setData({
            ...data,
            subscription:
            {
                ...data.subscription,
                suspend: !data.subscription.suspend
            }
        })
    }
    const toggleCustomTerms = () => {
        setData({
            ...data,
            subscription:
            {
                ...data.subscription,
                customPaymentTerms: !data.subscription.customPaymentTerms
            }
        })
    }

    const handleChange = (
        event:
            ChangeEvent<
                HTMLInputElement |
                HTMLTextAreaElement |
                HTMLSelectElement
            >
    ) => {
        const { name, value } = event.target;
        setData({ ...data, [name]: value });
        console.log(`Admin Details - ${name}: ${value}`);
    };

    const handleSubscriptionChange = (
        event: ChangeEvent<
            HTMLInputElement |
            HTMLTextAreaElement |
            HTMLSelectElement
        >
    ) => {
        const { name, value } = event.target;
        setSubscriptionDetails({ ...subscriptionDetails, [name]: value });
        setData({
            ...data,
            subscription:
            {
                ...data.subscription,
                [name]: value
            }
        })
        console.log(`Subscription - ${name}: ${value}`);
    };

    const handleBankDetailsChange = (
        event: ChangeEvent<
            HTMLInputElement |
            HTMLTextAreaElement |
            HTMLSelectElement
        >
    ) => {
        const { name, value } = event.target;
        setData({
            ...data,
            bankDetails:
            {
                ...data.bankDetails,
                [name]: value
            }
        })
        console.log(`BankDetails - ${name}: ${value}`);
    };

    const toggle = (password = "") => {
        setIsOpen(!isOpen);
        setTempPass(password);
    };

    const handleSelectChange = (
        name: string,
        value: string | number
    ) => {
        setData({
            ...data,
            [name]: value
        })
        console.log(name + ' : ' + value)
    }

    const handleSubmit = async (event: SyntheticEvent) => {
        event.preventDefault();
        setloading(true)
        let payload = data;
        payload.subscription = subscriptionDetails;
        console.log(payload)
        try {
            const subscriptionResponse = await DataService.post("/subscriptions/create", payload.subscription);
            payload.subscription = subscriptionResponse.data.data._id;
            const response = await DataService.post(`/admins/update/${params.id}`, payload);
            console.log(subscriptionResponse.data)
            console.log(response);
            // toggle(response.data.password);
            setloading(false)
        } catch (error: any) {
            console.log(error);
            setloading(false)
            toast.error(error?.response?.data?.message ?? "Something went wrong!");
        }
    };


    const callApi = async () => {
        setloading(true)
        try {
            const response = await DataService.post(`/admins/${params.id}`);
            console.log(response.data.data);
            setData(response.data.data)
            setloading(false)
        } catch (error) {
            setloading(false)
            console.log(error);
        }
    };
    useEffect(() => {
        callApi()
    }, [])

    return (
        <>
            <div className="basic-wizard important-validation">
                <StepperHorizontal
                    level={numberLevel}
                    setNumberLevel={setNumberLevel}
                />
            </div>
            <Form className="theme-form" onSubmit={handleSubmit}>
                {
                    numberLevel == 1 &&
                    <BasicInfoForm
                        handleSelectChange={handleSelectChange}
                        toggleComplete={toggleComplete}
                        data={data}
                        handleChange={handleChange}
                    />
                }
                {
                    numberLevel == 2 &&
                    <BankDetailsForm
                        toggleComplete={toggleComplete}
                        data={data}
                        handleBankDetailsChange={handleBankDetailsChange}
                    />
                }
                {
                    numberLevel == 3 &&
                    <SubscriptionForm
                        toggleComplete={toggleComplete}
                        toggleAutoRenewal={toggleAutoRenewal}
                        toggleSuspend={toggleSuspend}
                        toggleCustomTerms={toggleCustomTerms}
                        data={data}
                        handleSubscriptionChange={handleSubscriptionChange}
                        handleChange={handleChange}
                    />
                }
                {numberLevel == 4 && <ReviewForm data={data} />}
                <Row className="mt-3">
                    <Col className="g-2 d-flex justify-content-between">
                        {
                            numberLevel > 1 ? (
                                <Button
                                    className="alert-light-primary me-2"
                                    color="transparent"
                                    onClick={prevStep}>
                                    back
                                </Button>
                            )
                                :
                                <div></div>
                        }
                        {
                            numberLevel == 4 ?
                                <Button
                                    disabled={loading}
                                    color="primary"
                                    onClick={handleSubmit}
                                    className="btn btn-primary  me-3"
                                >
                                    Update
                                </Button>
                                :
                                <Button
                                    color="primary"
                                    disabled={isIncomplete}
                                    onClick={nextStep}
                                >
                                    Next
                                </Button>
                        }
                    </Col>
                </Row>

            </Form>
            <Modal isOpen={isOpen} toggle={() => toggle()}>
                <ModalBody>
                    <div className=" d-flex flex-column">
                        <h5>Temporary Password for this account is:</h5>
                        <br />
                        <div className="text-center w-100">
                            <h4
                                className="text-center"
                                onClick={() => {
                                    navigator.clipboard.writeText(tempPass);
                                    toast.success("Text copied to clipboard!");
                                }}
                            >
                                {tempPass}
                            </h4>
                        </div>
                        <br />
                        <div
                            className="d-flex align-items-center justify-content-end w-100"
                        >
                            <Button
                                className="me-2"
                                color="primary"
                                onClick={() => {
                                    navigator.clipboard.writeText(tempPass);
                                    toast.success("Text copied to clipboard!");
                                }}
                            >
                                Copy
                            </Button>
                            <Button
                                color="link"
                                className="btn btn-outline-primary"
                                onClick={() => toggle()}
                            >
                                Close
                            </Button>
                        </div>
                    </div>
                </ModalBody>
            </Modal>
        </>
    );
};

export default AdministratorUpdateForm;