import React, { useEffect, useState } from "react";
import Label from "./form/Label2";



const CtSelectedText = ({
  text,
  remove,
} : {
  text: string;
  remove?: () => void;
}) => {
  
  return (
      <div className="group flex items-center justify-center rounded-full border-[0.7px] border-transparent bg-gray-100 py-1 pl-2.5 pr-2 text-sm text-gray-800 hover:border-gray-200 dark:bg-gray-800 dark:text-white/90 dark:hover:border-gray-800">
        <span className="flex-initial max-w-full">{text}</span>
        <div className="flex flex-row-reverse flex-auto">
          {remove && 
          <div className="pl-2 text-gray-500 cursor-pointer group-hover:text-gray-400 dark:text-gray-400"
            onClick={() => remove()}>
            <svg
              className="fill-current"
              role="button"
              width="14"
              height="14"
              viewBox="0 0 14 14"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M3.40717 4.46881C3.11428 4.17591 3.11428 3.70104 3.40717 3.40815C3.70006 3.11525 4.17494 3.11525 4.46783 3.40815L6.99943 5.93975L9.53095 3.40822C9.82385 3.11533 10.2987 3.11533 10.5916 3.40822C10.8845 3.70112 10.8845 4.17599 10.5916 4.46888L8.06009 7.00041L10.5916 9.53193C10.8845 9.82482 10.8845 10.2997 10.5916 10.5926C10.2987 10.8855 9.82385 10.8855 9.53095 10.5926L6.99943 8.06107L4.46783 10.5927C4.17494 10.8856 3.70006 10.8856 3.40717 10.5927C3.11428 10.2998 3.11428 9.8249 3.40717 9.53201L5.93877 7.00041L3.40717 4.46881Z"
              />
            </svg>
          </div>
          }
        </div>
      </div>
  );
}

const CtSelectedTextField = ({
  label,
  listText,
  setListText,
} : {
  label?: string;
  listText: string[];
  setListText?: React.Dispatch<React.SetStateAction<string[]>>;
}) => {

  if (label)   
    return (
      <div className="flex gap-2">
        <div style={{ width: "36px" }}>
          <Label className="translate-y-1 text-right">{label}</Label>
        </div>
        <div className="flex-1">
          
          <div className="flex flex-wrap flex-auto gap-2">
            { listText.map((text, index) => (
              text !== "" && <CtSelectedText key={index} text={text}></CtSelectedText>
            ))}
          </div>

        </div>
      </div>
    );

  return (
    <div className="flex flex-wrap flex-auto gap-2">
      { listText.map((text, index) => (
        text !== "" && <CtSelectedText key={index} text={text}></CtSelectedText>
      ))}
    </div>
  );
}

export default CtSelectedTextField;