import React, {FC, useContext} from "react";
import {__} from "../../globals";
import {SelectOptionRenderersContext} from "./FieldContexts";
import classNames from "classnames";

export enum MultiSelectSearchItemContext {
    Menu = 'menu',
    Selected = 'selected',
}

export type MultiSelectSearchItemOptions = Partial<{
    beforeLabel(): React.ReactNode,
    beforeItemEnd?: false | (() => React.ReactNode),
    context: MultiSelectSearchItemContext,
    Label?: FC
}>;

export type MultiSelectSearchItemProps = {
    data: any,
    options?: MultiSelectSearchItemOptions,
    showID?: boolean,
    isMulti?: boolean
}

function DefaultLabel(props: { label: any, id: string, value: any }) {
    return <span>{props.label}</span>;
}

export const MultiSelectSearchItem: FC<MultiSelectSearchItemProps> = ({data: {label, value, id}, options, showID, isMulti = false}) => {
    const selectOptionRenderers = useContext(SelectOptionRenderersContext)
    let {beforeItemEnd} = options || {}

    showID = typeof showID === 'undefined' ? isMulti : showID;

    if (typeof beforeItemEnd === 'undefined') {
        if (isMulti) {
            beforeItemEnd = () => <span className="text-smaller-1 text-gray-250">{__('Add +')}</span>
        } else {
            beforeItemEnd = () => <span className="text-smaller-1 text-gray-250 flex items-center space-x-1"><span>{__('Select')}</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="min-w-3 min-h-3 max-w-3 max-h-3">
              <path strokeLinecap="round" strokeLinejoin="round" d="M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
            </svg></span>
        }
    }

    if (value && typeof value === 'object') {
        let renderer = selectOptionRenderers.find(({type}) => type === value?.type);
        if (renderer)   {
            label = renderer.render(value.value, options);
        } else {
            console.error('No renderer found for type:', value?.type, value);
        }
    }

    const Label = options?.Label || DefaultLabel

    return <div className="flex w-full">
          <span className={classNames('flex items-center justify-between space-x-2 w-full', {
              'text-base': options?.context === MultiSelectSearchItemContext.Menu,
              'text-1x': options?.context === MultiSelectSearchItemContext.Selected,
          })}>
              <div className="flex items-center space-x-3">
                  {options?.beforeLabel?.()}
                  <Label label={label} id={id} value={value}/>
              </div>
              <span className={'flex items-center space-x-2'}>
                  {showID && <span
                      className={"inline-flex items-center h-4 px-[4px] rounded-6 bg-gray-100 text-gray-250 text-smaller-3 tracking-tighter"}>ID {id}</span>}
                  {typeof beforeItemEnd === 'function' && beforeItemEnd()}
              </span>
          </span>
    </div>
}