import React, {FunctionComponent, useState} from "react"
import CheckboxCard from "/imports/ui/components/general/CheckboxCard";
import Tooltip from "/imports/ui/components/general/Tooltip";

interface PricingInputGroupProps {
    keyIsInvalid: any
    label: any
    field: any
    onCheckClicked: () => any
}

interface ExtendableCheckboxProps {
    id: string
    checked: boolean
    open: boolean
    className: string
    onChange: any
    label: any
    children: any
}

const ExtendableCheckbox: FunctionComponent<ExtendableCheckboxProps> = ({ id, checked, className, onChange, label, children, open }) => {
    return <div className={'checkbox-extra-content' + (open ? " open":"")}>
        <CheckboxCard
            id={id}
            checked={checked}
            className={className}
            onChange={onChange}>

            {label}
        </CheckboxCard>

        {children}
    </div>
}

export const PricingInputGroup: FunctionComponent<PricingInputGroupProps> = ({ onCheckClicked, keyIsInvalid, label, field }) => {

    const [priceChanged, setPriceChanged] = useState(false);
    const [hoursChanged, setHoursChanged] = useState(false);
    const [discountChanged, setDiscountChanged] = useState(false);

    return <ExtendableCheckbox
        id={field.name}
        label={label}
        open={true}
        checked={true}
        className={field.className + " white-on-mint"}
        onChange={onCheckClicked}>

        <div className="content">
            <div className='grid-x grid-margin-x'>
                <div className="cell large-3">
                    <h6 className="text-grey mt-8">Price per hour:</h6>
                    <div className="form-group icon-over-input-left padding-fix">
                        <span className="icon-text text-mint">R</span>
                        <input
                            placeholder={"100"}
                            value={field.value.price || ""}
                            className={priceChanged && keyIsInvalid(`pricing_tiers.${field.name}.price`) ? "invalid":field.value.price ? "not-empty":""}
                            onChange={(evt) => {
                                setPriceChanged(true)
                                let price = parseInt(evt.target.value);
                                if(isNaN(price)) price = 0;
                                field.setValue({ price });
                            }}
                            inputMode="numeric"
                            type="text" />
                    </div>
                </div>
                <div className="cell large-3">
                    <h6 className="text-grey mt-8 line-height-14">
                        Min. hours:
                        <Tooltip
                            options={{ position: 'top', alignment: 'center' }}
                            toolTipText={"Make it count! Rent for at least 2 hours to allow for setup time"}
                            render={(ref: any) => (
                                <button
                                    ref={ref}
                                    onClick={(evt) => console.log(evt.target)} className="pricing-listing-tooltip">
                                    <i className="material-icons">info</i>
                                </button>
                            )} />
                    </h6>
                    <div className="form-group icon-over-input-right padding-fix">
                        <span className="icon-text text-mint">Hours</span>
                        <input
                            placeholder={"2"}
                            value={field.value.hours || ""}
                            className={hoursChanged && keyIsInvalid(`pricing_tiers.${field.name}.hours`) ? "invalid":field.value.hours ? "not-empty":""}
                            onChange={(evt) => {
                                setHoursChanged(true);
                                let hours = parseInt(evt.target.value);
                                if(isNaN(hours)) hours = 0;
                                field.setValue({ hours });
                            }}
                            inputMode="numeric"
                            type="text" />
                    </div>
                </div>
                <div className="cell large-3">
                    <h6 className="text-grey mt-8 line-height-14">
                        Net payout:
                        <Tooltip
                            options={{ position: 'top', alignment: 'center' }}
                            toolTipText={"Net Payout is based on a 12 hour shoot, minus the Everyspace service fee. We weren't kidding about great cash!"}
                            additionalToolTipClasses={'large-tooltip'}
                            render={(ref: any) => (
                                <button
                                    ref={ref}
                                    onClick={(evt) => console.log(evt.target)} className="pricing-listing-tooltip">
                                    <i className="material-icons">info</i>
                                </button>
                            )} />
                    </h6>
                    <div className="form-group icon-over-input-left padding-fix">
                        <span className="icon-text text-mint">R</span>
                        <input
                            readOnly={true}
                            value={field.value.payout ? field.value.payout.toFixed(2):"0.00"}
                            className="disabled-2"
                            style={{ color: "#252729" }}
                            disabled={true}
                            inputMode="numeric"
                            type="text" />
                    </div>
                </div>
                <div className="cell large-3">
                    <h6 className="text-grey mt-8 line-height-14">
                        8+ Hour Discount:
                        <Tooltip
                            options={{ position: 'top', alignment: 'center' }}
                            toolTipText={"The more, the merrier! We recommend offering a small discount to encourage longer bookings."}
                            render={(ref: any) => (
                                <button
                                    ref={ref}
                                    onClick={(evt) => console.log(evt.target)} className="pricing-listing-tooltip">
                                    <i className="material-icons">info</i>
                                </button>
                            )} />
                    </h6>
                    <div className="form-group icon-over-input-right padding-fix">
                        <span className="icon-text text-mint">% Off</span>
                        <input
                            placeholder={"10"}
                            value={field.value.custom_discount || ""}
                            className={discountChanged && keyIsInvalid(`pricing_tiers.${field.name}.custom_discount`) ? "invalid":field.value.custom_discount ? "not-empty":""}
                            onChange={(evt) => {
                                setDiscountChanged(true);
                                let discount = parseInt(evt.target.value);
                                if(isNaN(discount)) {
                                    discount = 0;
                                }
                                field.setValue({ custom_discount: Math.min(discount, 100) });
                            }}
                            inputMode="numeric"
                            type="text" />
                    </div>
                </div>
            </div>
        </div>
    </ExtendableCheckbox>
}