import Widget from "../widgets/Widget"
import { Offcanvas, Dropdown, Colorpicker, Switch } from "../offcanvas"
import { useState } from "@wordpress/element"
import axios from "axios";
import { toast } from 'react-toastify'
import { Notice } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { RawHTML } from "@wordpress/element";

const ico = (paths) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: paths }} />
);
const I = {
    swatches: ico('<circle cx="8" cy="9" r="2.5" fill="currentColor" stroke="none"/><circle cx="16" cy="9" r="2.5" fill="currentColor" stroke="none" opacity=".5"/><circle cx="12" cy="15" r="2.5" fill="currentColor" stroke="none" opacity=".75"/><path d="M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0" opacity=".2"/>'),
    style:    ico('<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="3.5"/><path d="M3 17h4M5 15v4M14 17h7"/>'),
    pin:      ico('<path d="M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>'),
    tooltip:  ico('<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>'),
    bgColor:  ico('<path d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z" fill="currentColor" stroke="none"/>'),
    textColor: ico('<path d="M4 20h4M12 4v16M6 4h12M16 20h4M12 10H7"/>'),
};

const VariationSwatch = ({ video, id, docs }) => {
    console.log(storebuild.storebuild_swatches_settings);
    const [swatches, setSwatches] = useState(false)
    const [general, setGeneral] = useState(storebuild.storebuild_swatches_settings?.tpwvs_general)
    const [shop, setShop] = useState(storebuild.storebuild_swatches_settings?.tpwvs_shop)

    const handleSwatches = (e) => {
        // e.preventDefault();
        setSwatches(swatches => !swatches)
    }

    const handleSwitch = (e) => {
        // e.preventDefault()
        if (e.target.name in general) {
            setGeneral({ ...general, [e.target.name]: e.target.checked })
        } else {
            setShop({ ...shop, [e.target.name]: e.target.checked })
        }
    }

    const handleColorpicker = (e) => {
        // e.preventDefault()
        if (e.target.name in general) {
            setGeneral({ ...general, [e.target.name]: e.target.value })
        } else {
            setShop({ ...shop, [e.target.name]: e.target.value })
        }
    }

    const handleChange = (e) => {
        // e.preventDefault()
        if (e.target.name in general) {
            setGeneral({ ...general, [e.target.name]: e.target.value })
        } else {
            setShop({ ...shop, [e.target.name]: e.target.value })
        }
    }

    const handleSaveSwatchesSettings = (e) => {
        e.preventDefault()
        const form_data = new FormData()
        form_data.append('action', 'tpwvs_update_settings')
        form_data.append('security', storebuild.shopbuild_nonce)
        form_data.append('tpwvs_general', JSON.stringify(general))
        form_data.append('tpwvs_shop', JSON.stringify(shop))
        axios.post(storebuild.ajax_url, form_data)
            .then(res => {
                toast.success(res.data?.data?.message)
            })
            .catch(err => {
                console.log(err)
                toast.error(err.data?.data?.message)
            })
    }

    const notice = __('To Enable This Feature You Need To Install <a href="' + storebuild.variation_swatch + '">Pure WC Variation Swatches</a> This Plugin.', 'shopbuild');

    return (
        <>
            <Widget
                title='Variation Swatches'
                description='Variation swatches for your woocommerce product ( image, color, size).'
                toggle={false}
                settings={true}
                onChange={handleSwatches}
                isPro={false}
                active={true}
            />
            <Offcanvas
                open={swatches}
                onClose={handleSwatches}
                heading='Variation Swatches'
                subtitle='Display product variations as color swatches, images, or labels for a richer shopping experience.'
                onSave={handleSaveSwatchesSettings}
                video={video}
                id={id}
                docs={docs}
            >
                {(shop && general) && <>
                    <div className="strb-offcanvas-option">
                        <Switch
                            id='enable_swatches'
                            title='Enable / Disable'
                            text='Hide/Show Swatches in shop loop'
                            icon={I.swatches}
                            defaultValue={shop.enable_swatches}
                            onChange={handleSwitch}
                        />
                        <Dropdown
                            id='swatch_style'
                            title='Swatch Style'
                            text='Select a style for the swatch.'
                            icon={I.style}
                            data={[
                                { value: 'tp-square', label: 'Square' },
                                { value: 'tp-rounded', label: 'Rounded' }
                            ]}
                            selected={general.swatch_style}
                            onChange={handleChange}
                        />
                        <Dropdown
                            id='swatch_position'
                            title='Swatch Position'
                            text='Set the position of the swatch on product cards.'
                            icon={I.pin}
                            data={[
                                { value: 'after_title', label: 'After Title' },
                                { value: 'after_add_to_cart', label: 'After Add To Cart' },
                                { value: 'after_price', label: 'After Price' },
                                { value: 'after_thumbnail', label: 'After Thumbnail' },
                            ]}
                            selected={shop.swatch_position}
                            onChange={handleChange}
                        />
                    </div>
                    <div className="strb-offcanvas-option">
                        <Switch
                            id='tooltip'
                            title='Enable / Disable'
                            text='Hide/Show Tooltip on the swatches.'
                            icon={I.tooltip}
                            defaultValue={general.tooltip}
                            onChange={handleSwitch}
                        />
                        <Colorpicker
                            title='Tooltip Background Color'
                            text='Change the tooltip background color.'
                            id='tooltip_background'
                            icon={I.bgColor}
                            defaultValue={general.tooltip_background}
                            onChange={handleColorpicker}
                        />
                        <Colorpicker
                            title='Tooltip Text Color'
                            text='Change the tooltip text color.'
                            id='tooltip_font_color'
                            icon={I.textColor}
                            defaultValue={general.tooltip_font_color}
                            onChange={handleColorpicker}
                        />
                    </div>
                </>}
                {!(shop && general) && <div className="strb-offcanvas-option">
                    <Notice status="warning" isDismissible={false}>
                        <RawHTML>{notice}</RawHTML>
                    </Notice>
                </div>}
            </Offcanvas>
        </>
    )
}

export default VariationSwatch;