import { faAdd } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useCallback, useMemo, useState } from "react";
import { CustomField } from "../../modules/manager/customfields/services/customFieldsService";
import { Paginated } from "../../services/Paginated";
import { GeneralIdRef } from "../../utils/GeneralIdRef";
import CustomFieldPicker from "../pickers/CustomFieldPicker";
import Column from "./columns";
import Table from "./Table";
import Button, { ButtonType } from "./Button";
import { useTranslation } from "react-i18next";
import { Namespaces } from "../../i18n/i18n";

export type CustomFieldEditorAdd = (newField: CustomField) => void;
export type CustomFieldEditorDelete = (keyValue: any) => void;

interface CustomFieldsEditorProps {
  name: string;
  label: string;
  error?: string;
  value: CustomField[];
  exclude: CustomField[];
  onAdd?: CustomFieldEditorAdd;
  onDelete?: CustomFieldEditorDelete;
}

const CustomFieldsEditor: React.FC<CustomFieldsEditorProps> = ({
  value,
  exclude,
  label,
  onAdd,
  onDelete,
}) => {
  const { t } = useTranslation<typeof Namespaces.Common>();
  const [id, setId] = useState<GeneralIdRef | undefined>(undefined);
  const [displayName, setDisplayName] = useState<string | undefined>(undefined);

  const columns: Column<CustomField>[] = useMemo(
    () => [{ key: "name", label: t("Name"), order: "asc" }],
    [],
  );

  const paginated: Paginated<CustomField> = useMemo(
    () => ({
      count: 0,
      page: 1,
      pageSize: 10,
      totalPages: 0,
      data: value,
    }),
    [value],
  );

  const handleAdd = useCallback(() => {
    if (!onAdd || !id) return;

    const newField: CustomField = {
      id: id.id ?? BigInt(-1),
      name: String(displayName),
      fieldType: "",
      defaultValue: "",
      minEntries: 1,
      guid: id.guid,
    };

    onAdd(newField);

    setId(undefined);
    setDisplayName(undefined);
  }, [onAdd, id, displayName]);

  const handleChange = useCallback(
    (name: string, value: GeneralIdRef, displayValue: string) => {
      setId(value);
      setDisplayName(displayValue);
    },
    [],
  );

  return (
    <div>
      {label}
      <Table
        data={paginated}
        keyName="id"
        columns={columns}
        onDelete={onDelete}
      />

      <div>
        <CustomFieldPicker
          name="customField"
          label="Add"
          exclude={exclude}
          value={undefined}
          onChange={handleChange}
        />

        <Button
          buttonType={ButtonType.primary}
          onClick={handleAdd}
          disabled={id === undefined}
        >
          <FontAwesomeIcon icon={faAdd} />
        </Button>
      </div>
    </div>
  );
};

export default CustomFieldsEditor;