import React, {FC, useMemo} from "react";
import {
    MultiSelectSearchItem,
    MultiSelectSearchItemContext,
    MultiSelectSearchItemOptions
} from "./MultiSelectSearchItem";
import {SelectOption} from "./MultiSelectSearch";
import {__} from "../../globals";

export type MultiSelectStateProps<Value = SelectOption> = {
    values: Value[],
    afterValues?: () => React.ReactNode,
    onRemoveValue?: (value: Value) => void,
    labels?: Partial<{
        above?: string,
    }>,
    defaultItemOptions?: typeof itemOptions,
    CustomItem?: FC<{ value: Value }>,
    showDefaultEmptyState?: boolean, // default is true
}

const itemOptions = {
    context: MultiSelectSearchItemContext.Selected,
    beforeLabel(): React.ReactNode {
        return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                    className="min-w-5 min-h-5 max-w-5 max-h-5 text-gray-250">
            <path fill-rule="evenodd"
                  d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                  clip-rule="evenodd"/>
        </svg>
    }
} as MultiSelectSearchItemOptions


export const MultiSelectState = <T extends any = any>({
                                                          values,
                                                          afterValues,
                                                          onRemoveValue,
                                                          labels,
                                                          defaultItemOptions,
                                                          CustomItem,
                                                          showDefaultEmptyState = true,
                                                      }: MultiSelectStateProps<T>) => {

    const heightAndMargin = 'h-60 --mt-4'

    if (values?.length) {
        return <div className={`flex flex-col relative space-y-2 ${false && heightAndMargin} --mt-4 max-h-75`}>
            {labels?.above && <h2 className="text-smaller-1 text-gray-500 ml-5">{labels.above}</h2>}
            <div
                className="space-y-2 flex flex-col items-start rounded-2 bg-white bg-opacity-60 px-4 py-3 border-[1px] border-gray-150 ---flex-grow overflow-auto">
                {values.map(value => {
                        return CustomItem ? <CustomItem value={value}/> :
                            <MultiSelectSearchItem isMulti={true} data={value} options={{
                                beforeItemEnd: () => <button onClick={(() => onRemoveValue?.(value))}>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                                         className="min-w-5 min-h-5 max-w-5 max-h-5 text-gray-300">
                                        <path fillRule="evenodd"
                                              d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z"
                                              clipRule="evenodd"/>
                                    </svg>
                                </button>,
                                ...{
                                    ...itemOptions,
                                    ...defaultItemOptions || {},
                                },
                            } as MultiSelectSearchItemOptions}/>;
                    }
                )}
            </div>
            {afterValues?.()}
        </div>
    }

    if (showDefaultEmptyState) {
        return <div className={'flex items-center justify-center w-full rounded-1 --border-gray-150 --border-[2px] pb-6 px-5'}>
            {false && <svg width="150" height="161" viewBox="0 0 150 161" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g filter="url(#filter0_d_1_259)">
                    <path
                        d="M118 43H32C29.2386 43 27 45.2386 27 48V153C27 155.761 29.2386 158 32 158H118C120.761 158 123 155.761 123 153V48C123 45.2386 120.761 43 118 43Z"
                        fill="white"/>
                </g>
                <path
                    d="M66 53H40C38.3431 53 37 54.3431 37 56C37 57.6569 38.3431 59 40 59H66C67.6569 59 69 57.6569 69 56C69 54.3431 67.6569 53 66 53Z"
                    fill="#E1EBFA"/>
                <path
                    d="M66 95H40C38.3431 95 37 96.3431 37 98C37 99.6569 38.3431 101 40 101H66C67.6569 101 69 99.6569 69 98C69 96.3431 67.6569 95 66 95Z"
                    fill="#E1EBFA"/>
                <path
                    d="M108 68H42C39.7909 68 38 69.7909 38 72V82C38 84.2091 39.7909 86 42 86H108C110.209 86 112 84.2091 112 82V72C112 69.7909 110.209 68 108 68Z"
                    stroke="#1485FD" stroke-width="2"/>
                <path
                    d="M108 109H42C39.2386 109 37 111.239 37 114V122C37 124.761 39.2386 127 42 127H108C110.761 127 113 124.761 113 122V114C113 111.239 110.761 109 108 109Z"
                    fill="#DFEAFB"/>
                <path
                    d="M86 88C88.7614 88 91 85.7614 91 83C91 80.2386 88.7614 78 86 78C83.2386 78 81 80.2386 81 83C81 85.7614 83.2386 88 86 88Z"
                    fill="#DFEAFB"/>
                <path
                    d="M89.907 104.37C89.107 104.37 88.36 104.37 87.68 104.327C86.8424 104.27 86.0367 103.984 85.3514 103.499C84.6662 103.014 84.1279 102.349 83.796 101.578L79.577 93.24C79.2676 92.8797 79.1131 92.4117 79.1471 91.938C79.1812 91.4643 79.4012 91.0233 79.759 90.711C80.0522 90.4754 80.4179 90.3485 80.794 90.352C81.0709 90.3601 81.3428 90.4281 81.5909 90.5513C81.8389 90.6746 82.0573 90.8502 82.231 91.066L84.147 93.681L84.176 93.715V83.78C84.176 83.2871 84.3718 82.8144 84.7203 82.4659C85.0689 82.1173 85.5416 81.9215 86.0345 81.9215C86.5274 81.9215 87.0001 82.1173 87.3487 82.4659C87.6972 82.8144 87.893 83.2871 87.893 83.78V90.28C87.8714 90.0408 87.8999 89.7998 87.9766 89.5722C88.0534 89.3446 88.1766 89.1355 88.3386 88.9582C88.5007 88.781 88.6978 88.6394 88.9176 88.5425C89.1373 88.4456 89.3748 88.3956 89.615 88.3956C89.8552 88.3956 90.0927 88.4456 90.3124 88.5425C90.5322 88.6394 90.7294 88.781 90.8914 88.9582C91.0534 89.1355 91.1767 89.3446 91.2534 89.5722C91.3301 89.7998 91.3586 90.0408 91.337 90.28V91.635C91.3154 91.3958 91.3439 91.1548 91.4206 90.9272C91.4974 90.6996 91.6206 90.4905 91.7826 90.3132C91.9447 90.136 92.1418 89.9944 92.3616 89.8975C92.5813 89.8006 92.8188 89.7506 93.059 89.7506C93.2992 89.7506 93.5367 89.8006 93.7564 89.8975C93.9762 89.9944 94.1734 90.136 94.3354 90.3132C94.4974 90.4905 94.6207 90.6996 94.6974 90.9272C94.7741 91.1548 94.8026 91.3958 94.781 91.635V92.679C94.7594 92.4398 94.7879 92.1988 94.8646 91.9712C94.9414 91.7436 95.0646 91.5345 95.2266 91.3572C95.3887 91.18 95.5858 91.0384 95.8056 90.9415C96.0253 90.8446 96.2628 90.7946 96.503 90.7946C96.7432 90.7946 96.9807 90.8446 97.2004 90.9415C97.4202 91.0384 97.6174 91.18 97.7794 91.3572C97.9414 91.5345 98.0647 91.7436 98.1414 91.9712C98.2181 92.1988 98.2466 92.4398 98.225 92.679V99.016C98.191 100.965 97.31 104.251 94.211 104.251C93.986 104.261 92.08 104.371 89.911 104.371L89.907 104.37Z"
                    fill="#1485FD" stroke="white"/>
                <defs>
                    <filter id="filter0_d_1_259" x="21" y="34" width="108" height="127" filterUnits="userSpaceOnUse"
                            color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                                       result="hardAlpha"/>
                        <feOffset dy="-3"/>
                        <feGaussianBlur stdDeviation="3"/>
                        <feColorMatrix type="matrix"
                                       values="0 0 0 0 0.788235 0 0 0 0 0.803922 0 0 0 0 0.85098 0 0 0 0.349 0"/>
                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_259"/>
                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_259" result="shape"/>
                    </filter>
                </defs>
            </svg>}
            <div className={"flex flex-col items-center justify-center gap-2 text-gray-300 pt-8"}>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="min-w-6 min-h-6 max-w-6 max-h-6">
                    <path d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z" />
                    <path d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z" />
                    <path d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z" />
                </svg>
                <p className={'text-1x'}>{__('Search or open the selector to add items')}</p>
            </div>
        </div>;
    }

};