"use client";
import { Button, Col, Input, Label, Row, } from "reactstrap";
import { useEffect, useState } from "react";
import { AdminInitialValue } from "@/Types/AdminType";
import { getFormattedDateValue } from "@/utils/Constants";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";

const requiredFields:
    (keyof AdminInitialValue['subscription'])[] | any = [
        'testPeriodStartDate',
        'testPeriodEndDate',
        'subscriptionPeriodStartDate',
        'subscriptionPeriodEndDate',
        'paymentTerms',
        'invoicingPeriodMonths',
        'suspendDate',
        'numberOfUsers'
    ];

const SubscriptionForm = (
    {
        handleSubscriptionChange,
        data,
        toggleAutoRenewal,
        toggleSuspend,
        toggleCustomTerms,
        toggleComplete,
        setInvoiceIssuedDocument,
        setSignedForm
    }:
        {
            handleSubscriptionChange: any,
            handleChange: any,
            data: AdminInitialValue | any,
            toggleAutoRenewal: any,
            toggleSuspend: any,
            toggleCustomTerms: any,
            toggleComplete?: any
            setInvoiceIssuedDocument: any,
            setSignedForm: any
        }
) => {
    const path = usePathname();
    console.log(path)
    useEffect(() => {
        const allFieldsValid = requiredFields.every(
            (field: any) =>
                data?.subscription?.[field]
        );
        console.log(allFieldsValid)
        if (toggleComplete) {
            if (allFieldsValid) {
                toggleComplete(false)
            }
            else {
                toggleComplete(true)
            }
        }
    }, [data])

    return (
        <div>
            <Row className="mt-3 g-4">
                <Col className="d-flex justify-content-end">
                    <Link
                        href={path + '/subscriptions'}
                        className="btn btn-outline-primary me-2"
                    >
                        View History
                    </Link>
                    <Link
                        className="btn btn-outline-primary me-2"
                        href={path + '/subscriptions/create'}
                        color="primary"
                    >
                        Create New
                    </Link>
                </Col>
            </Row>
            <Row className="mt-3 g-4">
                <Col lg="6" sm="6">
                    <Label check>
                        Test Period Start Date
                        <span className="text-danger">*</span>
                    </Label>
                    <Input
                        value={
                            getFormattedDateValue(data?.subscription?.testPeriodStartDate)
                        }
                        onChange={handleSubscriptionChange}
                        name="testPeriodStartDate"
                        type="date"
                    />
                </Col>
                <Col xs="6">
                    <Label>
                        Test Period End Date
                        <span className="text-danger">*</span>
                    </Label>
                    <Input
                        value={
                            getFormattedDateValue(data?.subscription?.testPeriodEndDate)
                        }
                        name="testPeriodEndDate"
                        onChange={handleSubscriptionChange}
                        type="date"
                    />
                </Col>
                <Col lg="6" sm="6">
                    <Label check>
                        Subscription Period Start Date
                        <span className="text-danger">*</span>
                    </Label>{" "}
                    <Input
                        value={getFormattedDateValue(data?.subscription?.subscriptionPeriodStartDate)}
                        onChange={handleSubscriptionChange}
                        name="subscriptionPeriodStartDate"
                        type="date"
                    />
                </Col>
                <Col xs="6">
                    <Label>
                        Subscription Period End Date
                        <span className="text-danger">*</span>
                    </Label>
                    <Input
                        value={getFormattedDateValue(data?.subscription?.subscriptionPeriodEndDate)}
                        name="subscriptionPeriodEndDate"
                        onChange={handleSubscriptionChange}
                        type="date"
                    />
                </Col>
                <Col sm="4">
                    <Label check>Amount</Label>
                    <Input
                        value={data?.subscription?.amount}
                        onChange={handleSubscriptionChange}
                        name="amount"
                        className="form-control"
                        type="number"
                    />
                </Col>
                <Col sm="4">
                    <Label check>
                        Invoice Issued
                        <span className="text-danger">*</span>
                    </Label>
                    <Input
                        value={getFormattedDateValue(data?.subscription?.invoiceIssued)}
                        onChange={handleSubscriptionChange}
                        name="invoiceIssued"
                        className="form-control"
                        type="date"
                    />
                </Col>
                <Col sm="4">
                    <Label check>Issued Invoice Document</Label>
                    <Input
                        onChange={(e) => setInvoiceIssuedDocument(e.target.files?.[0])}
                        name="issuedInvoiceDocument"
                        className="form-control"
                        type="file"
                    />
                </Col>
                <Col lg="4" sm="4">
                    <Label check className="d-flex justify-content-between">
                        <span>
                            Payment Terms
                            <span className="text-danger">*</span>
                        </span>
                        <div>
                            <span className="me-1">Custom </span>
                            <Input
                                type="checkbox"
                                onClick={toggleCustomTerms}
                                checked={data?.subscription?.customPaymentTerms}
                                className="customPaymentTerm"
                                name="toggle"
                            />
                        </div>
                    </Label>
                    {
                        data?.subscription?.customPaymentTerms ?
                            <Input
                                onChange={handleSubscriptionChange}
                                name="paymentTerms"
                                type="date"
                                disabled={!data?.subscription?.customPaymentTerms}
                                className="form-control "
                            />
                            :
                            <select
                                className="form-control"
                                onChange={handleSubscriptionChange}
                                name="paymentTerms"
                            >
                                <option value="30">Net 30</option>
                                <option value="60">Net 60</option>
                                <option value="90">Net 90</option>
                            </select>
                    }
                </Col>
                <Col sm="4">
                    <Label check>Invoicing Period</Label>
                    <select
                        name="invoicingPeriodMonths"
                        onChange={handleSubscriptionChange}
                        className="form-control"
                        id=""
                    >
                        <option value="3">3 Months</option>
                        <option value="6">6 Months</option>
                        <option value="12">12 Months</option>
                    </select>
                </Col>
                <Col sm="2">
                    <Label check>Autorenewal</Label>
                    <br />
                    <Input
                        onClick={toggleAutoRenewal}
                        checked={data?.subscription?.autoRenewal}
                        type="checkbox"
                        name="autoRenewal"
                    />
                </Col>
                <Col sm="4">
                    <div className="d-flex justify-content-between w-100">
                        <Label check>Suspend</Label>
                        <Input
                            type="checkbox"
                            onClick={toggleSuspend}
                            checked={data?.subscription?.suspend}
                            className="me-3"
                        />
                    </div>
                    <Input
                        disabled={data?.subscription?.suspend}
                        value={
                            getFormattedDateValue(data?.subscription?.suspendDate)
                        }
                        onChange={handleSubscriptionChange}
                        type="date"
                        name="suspendDate"
                    />
                </Col>
                <Col sm="4">
                    <Label check>Number of Users:</Label>
                    <Input
                        value={data?.subscription?.numberOfUsers}
                        name="numberOfUsers"
                        onChange={handleSubscriptionChange}
                        type="number"
                    />
                </Col>
                <Col sm="4">
                    <Label check>Signed Order Form</Label>
                    <Input
                        onChange={(e: any) => setSignedForm(e.target.files?.[0])}
                        name="signedOrderForm"
                        className="form-control"
                        type="file"
                    />
                </Col>
                <Col sm="12">
                    <Label check>Services Provided</Label>
                    <textarea
                        name="servicesProvided"
                        onChange={handleSubscriptionChange}
                        className="form-control"
                        rows={2}
                    />
                </Col>

                <Col lg="12" sm="12">
                    <Label check>Comment</Label>
                    <textarea
                        value={data?.subscription?.comment}
                        name="comment"
                        rows={3}
                        className="form-control"
                        onChange={handleSubscriptionChange}
                        id=""
                    />
                </Col>
                <Col lg="12" sm="12">
                    <Label check>Notes</Label>
                    <textarea
                        value={data?.subscription?.notes}
                        cols={5}
                        rows={5}
                        name="notes"
                        onChange={handleSubscriptionChange}
                        className="form-control"
                    ></textarea>
                </Col>
            </Row>
        </div>
    )
}

export default SubscriptionForm