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

export type SelectOptionRenderersProps = {
}

const renderers = [
    {
        type: 'hierarchy',
        render: (values: string[]) => {
            return <div className="flex items-center space-x-1">
                {values.map((label, index) => {
                    const isLast = index + 1 === values.length;

                    return <>
                    <span key={`${label} + ${index}`} className={classNames({
                        'text-gray-800': isLast,
                        'text-gray-300': !isLast,
                    })}>{label}</span>
                        {!isLast && <span key={`${label} + ${index} + separator`} className="text-gray-350 min-w-3 min-h-3 max-w-3 max-h-3"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
                                  <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
                                </svg>
                    </span>}
                    </>
                })}
            </div>
        }
    }
]
export const SelectOptionRenderers: FC<SelectOptionRenderersProps & PropsWithChildren> = ({children}) => {

    return <SelectOptionRenderersContext.Provider value={renderers}>
        {children}
    </SelectOptionRenderersContext.Provider>
}