import { CouponsPlus, __ } from "./globals";
import parse from 'html-react-parser';
import createCard from './conditionsOrFilters/CardCreator';
import CardIcon from './CardIcon';
import { useDispatch, useSelector } from "react-redux";
import RowsActions from './actions/RowsActions';

const BuiltInPresets = () => {
    const dispatch = useDispatch();
    const currentRows = useSelector(state => state.rows)

    return Object.keys(CouponsPlus.presets).map(category => (
        <div className="w-full flex flex-col space-y-2">
            <h1 className="ml-4 font-medium text-gray-600 text-2x">{category}</h1>
            <div className="grid gap-4 grid-cols-3">
                {CouponsPlus.presets[category].map(preset => (
                    <div key={preset.name} className="flex flex-col p-4 rounded-2 bg-gray-100 space-y-5">
                        <div className="flex flex-col space-y-3">
                            <p className="text-2x text-gray-650">{preset.name}</p>
                            <div className="flex flex-col">
                                <span className="text-smaller-1 text-gray-500">{__('Example:',window.CouponsPlus.textDomain)}</span>
                                <p className="text-base text-gray-500">{getExample(preset.example)}</p>
                            </div>
                        </div>
                        <div className="flex flex-row justify-between items-center">
                            <div className="flex flex-row space-x-1">
                                {Object.keys(preset.uses).map(typeOfComponent => (
                                    preset.uses[typeOfComponent].map(componentTYPE => {
                                        const card = createCard(typeOfComponent, {type: componentTYPE})

                                        return (<CardIcon key={componentTYPE} icon={card.getIcon()} dark={false} />)
                                    })
                                ))}
                            </div>
                            <button 
                                className="h-9 px-6 rounded-4 bg-gray-150" 
                                onClick={attemptToSetRows.bind(this, preset, currentRows, dispatch)}
                            >{__('Use preset',window.CouponsPlus.textDomain)}</button>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    ));
}

BuiltInPresets.label = __('Built–in',window.CouponsPlus.textDomain)
BuiltInPresets.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="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
</svg>

const getExample = example => {
    example = example || '';

    return parse(example.replace('(\\n)', '<br><br>')
          .replace(/url\((.*)\)/gi, (match, first) => {
            const [text, url] = first.split("|");
            return `<a href="${url.trim()}" target="_blank">${text.trim()}</a>`;
          }))
}

export const attemptToSetRows  = (preset, currentRows ,dispatch) => {
    if (currentRows.length? window.confirm(__('By importing this preset, your current settings will be overriden. Are you sure want to continue?',window.CouponsPlus.textDomain)) : true) {
        dispatch(RowsActions.setRows(
            JSON.parse(preset.rows),
            'from-preset'
        ))
    }
}
export default BuiltInPresets;