import React, {FC} from "react";
import {fieldsCache} from "../FieldsCache";
import classNames from "classnames";

export type InclusionValueValidatorListProps = {
    options: any/*InclusionValueValidatorOptions*/
}
export const InclusionValueValidatorList: FC<InclusionValueValidatorListProps> = ({options: {inclusionType, expectedValues}}) => {
    return <div className={classNames('grid grid-cols-1 gap-0', {
        'mt-1': expectedValues.length > 1,
    })}>
        {expectedValues.map((value, index) => {
            return <div className="flex items-center space-x-[2px]">
                {false && expectedValues.length > 1 && (inclusionType === 'allowed'? <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="min-w-[10px] min-h-[10px] max-w-[10px] max-h-[10px] opacity-40">
                    <path fillRule="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" clipRule="evenodd" />
                </svg> : <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="min-w-[10px] min-h-[10px] max-w-[10px] max-h-[10px] opacity-70">
                    <path fill-rule="evenodd" d="m6.72 5.66 11.62 11.62A8.25 8.25 0 0 0 6.72 5.66Zm10.56 12.68L5.66 6.72a8.25 8.25 0 0 0 11.62 11.62ZM5.105 5.106c3.807-3.808 9.98-3.808 13.788 0 3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788Z" clip-rule="evenodd" />
                </svg>)}
                <span className="text-base leading-[18px]">{fieldsCache.get(value)?.label || '?'}</span>
            </div>
        })}
    </div>
}