import { createRef, useEffect, useState } from "react";
import CardHeader from "./CardHeader";
import Input from "./fields/Input";
import { CouponsPlus, __ } from "./globals";
import { useDispatch, useSelector, useStore } from "react-redux";
import { exportRows } from "./helpers/exportUtils";
import { attemptToSetRows } from "./BuiltInPresets";

const ImportExportPresets = () => {
    const [preset, setpreset] = useState('')
    const store = useStore(store => store)
    const currentRows = useSelector(state => state.rows)

    const dispatch = useDispatch();
    const inputref = createRef()

    useEffect(() => {
        inputref?.current?.focus()
    }, [preset])

    return <div className="w-full w-full flex flex-col items-center">
        <div className="w-[400px] flex-col items-center">
            <div className="w-full bg-gray-100 relative rounded-3">
                <div className={`relative w-full h-20 bg-gray-250 rounded-t-3 overflow-hidden coupon-urls-header-illustration `}>

                </div>
                <div className="space-y-4 w-full h-full p-3">
                    <CardHeader
                        card={{
                            getIcon: () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M9 4.5v15m6-15v15m-10.875 0h15.75c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125H4.125C3.504 4.5 3 5.004 3 5.625v12.75c0 .621.504 1.125 1.125 1.125z" />
                            </svg>,
                            getTitle: () => __('Coupon Rows',window.CouponsPlus.textDomain)
                        }}
                    />
                </div>
                <div className="flex flex-row space-x-2 items-center px-3 pb-2">
                    <Input 
                        inputref={inputref}
                        getValue={() => preset} 
                        onChange={setpreset.bind(this)} 
                        width="full"
                        getPlaceholder={() => 'JSON Template. EG: [{"columns":[{"type":"SimpleOffer","testableType":"conditions","defaultOffers":[{"temporaryID":"dOzfsJ-FO","...'}
                        labels={{
                            bottom: 'The source of the imported or exported preset. Must be a valid JSON string.'
                        }}
                    />
                </div>
            </div>
            <div className="flex flex-row items-center space-x-2 mt-3 justify-center">
                <button className={"flex flex-row space-x-1 items-center justify-center bg-blue-normal text-gray-100 px-12 h-8 rounded-1"} onClick={() => tryToImport(preset, currentRows, dispatch)}>
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
                    </svg>
                    <span className="flex h-4">{__('Import',window.CouponsPlus.textDomain)}</span>
                </button>
                <button class="space-x-1 items-center justify-center inline-flex bg-gray-300 text-gray-550 px-8 h-8 rounded-1" onClick={() => {
                    setpreset(exportRows(store))
                }}>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3" />
                    </svg>
                    <span>{__('Export current',window.CouponsPlus.textDomain)}</span>
                </button>
            </div>
       </div>
    </div>;
}

ImportExportPresets.label = __('Custom Import & Export',window.CouponsPlus.textDomain)
ImportExportPresets.icon = <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
</svg>

const tryToImport = (preset, currentRows, dispatch) => {
    if (!preset) {
        alert(__('Please enter a preset to import',window.CouponsPlus.textDomain))
        return
    }
    try {
        const rows = JSON.parse(preset);

        if (!Array.isArray(rows)) {
            throw new Error()
        }
    } catch(exception) {
        alert('Cannot import: invalid preset')
        return
    }

    attemptToSetRows({rows: preset}, currentRows,dispatch)
}

export default ImportExportPresets;