import React, { useRef } from "react";
import { Checkbox, DragAndDrop, IconButton, Tooltip, Label } from "../..";
import { useLocale } from "../../../hooks/useLocale";
import AreaMenu, { Area, Menu } from "../../AreaMenu";

export const TableButtons = (props: any) => {

  const { 
    columns,
    onChangeColumns,
    buttons = ["export", "orderColumn"],
    onExport,
    disabled, 
  } = props;

  const areaMenuRef: any = useRef()

  const labels = {
    export: useLocale("export"),
    change_column_order: useLocale('change_column_order')
  }

  const exportOptions = [
    {
      type: "Csv",
      label: "export_csv",
    },
    {
      type: "Pdf",
      label: "export_pdf",
    },
  ];

  const availableButtons: any = {
    export: (key: any) => {
      return (
        <AreaMenu ref={areaMenuRef} key={key} id="exportTable">
          <Area>
            <Tooltip title={labels['export']}>
              <IconButton
                onClick={() => {}}
                size="small"
                icon="get_app"
                variant="secondary"
                isDisabled={disabled}
              />
            </Tooltip>
          </Area>
          {disabled ? (
            <></>
          ) : (
            <Menu>
              <div className="gtc-rc-menu-columns">
                <ul>
                  {exportOptions.map((option) => (
                    <li
                      onClick={() => { 
                        onExport(option.type); 
                        areaMenuRef.current.close();
                      }}
                    >
                      <Label>{option.label}</Label>
                    </li>
                  ))}
                </ul>
              </div>
            </Menu>
          )}
        </AreaMenu>
      );
    },
    orderColumn: (key: any) => {
      return (
        <AreaMenu ref={areaMenuRef} key={key} id="columnsOrder"> 
          <Area>
            <Tooltip title={labels["change_column_order"]}>
              <IconButton
                icon="view_column"
                variant="secondary"
                size="small"
                onClick={() => {
                  
                }}
              />
            </Tooltip>
          </Area>
          <Menu>
            <div
              style={{
                position: "relative"
              }}
            >
              <DragAndDrop
                containers={[{
                  title: undefined,
                  isDragDisabled: false,
                  direction: "vertical",
                  isDeletable: false,
                  cloneItems: false,
                  className: "",
                  style: {},
                  items: columns
                }]}
                itemRenderer={(item: any) => {
                  if (!item?.title) return null;
                  return (
                    <div style={{ display: "flex" }}>
                      <Checkbox
                        id={item.key}
                        label={item.title}
                        checked={item?.disabled ? true : item.show}
                        isDisabled={item?.disabled}
                        value={item.show}
                        onChange={(checked) => {
                          let index = columns.findIndex((x: any) => x == item);
                          let newColumns = [...columns];
                          newColumns[index].show = checked;
                          onChangeColumns(newColumns);
                        }}
                      />
                    </div>
                  );
                }}
                onDragEnd={(result: any) => {
                  onChangeColumns(result[0]?.items);
                }}
              />
            </div>
          </Menu>
        </AreaMenu>
      );
    },
  };

  return (
    <div style={{ display: "flex" }}>
      {buttons.map((button: any, key: any) => {
        return availableButtons[button](key);
      })}
    </div>
  );
};
