import { FC } from "react";
import {
  FormListItemWrapper,
  IconArea,
  LabelArea,
} from "./FormListItem.styles";
import { fields } from "../../definitionsNew/fields";
import { Icon } from "venice-ui";
import { Colors } from "../../untils/Theme";
import { dictionary } from "../../untils/dictionary";
import { t } from "../../helpers/userHelper";

interface IFormListItem {
  id: string;
  isActive: boolean;
  isVisable: boolean;
  isExportible: boolean;
  updateItem: (id: string, mode: string) => void;
  isExportable: boolean;
  isRequired: boolean;
  isForm: boolean;
  handleDragStart: (e: any, id: string, list: string, groupID?: number) => void;
  handleonDragEnd: () => void;
  listName: string;
  isDraging: boolean;
  isGroup: boolean;
  groupID: number
}

export const FormListItem: FC<IFormListItem> = ({
  id,
  isActive,
  isVisable,
  isExportible,
  updateItem,
  isExportable,
  isRequired,
  isForm,
  handleDragStart,
  handleonDragEnd,
  listName,
  isDraging,
  isGroup,
  groupID
}) => {
  const item: any = fields.find((_item) => _item.id === id)!;


  return (
    <FormListItemWrapper
      draggable="true"
      onDragStart={(e) => handleDragStart(e, item.id, listName, isGroup ? groupID : undefined)}
      onDragEnd={handleonDragEnd}
      isDraging={isDraging}
    >
      <LabelArea>
        {" "}
        {t(dictionary[item.id as keyof typeof dictionary])}{" "}
        {isRequired && <span style={{ color: Colors.red }}>*</span>}
      </LabelArea>
      {isActive && (
        <IconArea>
          {isExportable && (
            <>
              <Icon
                name={isVisable ? "visibility" : "visability_off"}
                size={'md'}
                onClick={() => updateItem(item.id, "visable")}
                color={isVisable ? Colors.seaBlue : Colors.text}
                tooltip={isVisable ? t(dictionary.visibleOnList) : t(dictionary.hiddenOnList)}
              />
              <Icon
                name={isExportible ? "download" : "download_off"}
                size={'md'}
                onClick={() => updateItem(item.id, "export")}
                color={isExportible ? Colors.seaBlue : Colors.text}
                tooltip={isExportible ? t(dictionary.visibleInExport) : t(dictionary.hiddenInExport)}
              />
            </>
          )}
        </IconArea>
      )}
    </FormListItemWrapper>
  );
};