import React from 'react';

import {useShopStore} from "./shop_store";
import {Tip} from "./options/components/Tip";
import {formatMoney} from "./utils";

export function CrateFanTray({crate_index}) {
    const currency = useShopStore((state) => state.currency);
    const fanTray = useShopStore((state) => state.fanTray);
    const crate_id = useShopStore((state) => state.crates[crate_index].id);
    const fanTrayAvailable = useShopStore((state) => state.fanTrayAvailableByIndex(crate_index));
    const fanTrayEnabled = useShopStore((state) => state.crates[crate_index].fan_tray);
    const updateFanTray = useShopStore((state) => state.updateFanTrayOption);

    const base_id = crate_id + "fan_tray";
    return fanTrayAvailable ? (
        <div className="crate-bar">
            <div className="shop-switch">
                <div className="form-check form-switch">
                    <input
                        className="form-check-input"
                        type="checkbox"
                        role="switch"
                        id={base_id}
                        checked={fanTrayEnabled}
                        onClick={() => updateFanTray(crate_id, !fanTrayEnabled)}
                        onChange={() => updateFanTray(crate_id, !fanTrayEnabled)}
                    />
                    <label className="form-check-label" htmlFor={base_id} style={{"display": "inline", marginRight: "0.125rem"}}>
                        {fanTray.optionTitle} (+{`${currency} ${formatMoney(fanTray.price)}`})
                    </label>
                    {fanTray.tip && <Tip id={base_id + "tooltip"} tip={fanTray.tip}/>}
                </div>
            </div>
        </div>
    ) : null
}