import * as React from "react";
import { classNames } from "@progress/kendo-react-common";

import {
  TaskBoardColumn as KendoTaskBoardColumn,
  TaskBoardColumnProps as KendoTaskBoardColumnProps,
  TaskBoardColumnHeaderProps as KendoTaskBoardColumnHeaderProps,
} from "@progress/kendo-react-taskboard";
import BadgeContainer from "@/components/Indicators/BadgeContainer/BadgeContainer";
import Badge from "@/components/Indicators/Badge/Badge";
import { Button } from "@progress/kendo-react-buttons";
import { Input } from "@progress/kendo-react-inputs";

const themeColor: Record<string, "warning" | "info" | "success"> = {
  todo: "warning",
  inProgress: "info",
  done: "success",
};

const ColumnHeader = (props: KendoTaskBoardColumnHeaderProps) => {
  const { edit, title, status } = props.column;

  return (
    <div className={"k-taskboard-column-header"}>
      <div className={"k-taskboard-column-header-text k-text-ellipsis"}>
        {edit ? (
          <Input
            value={title}
            onChange={props.onTitleChange}
            onBlur={props.onColumnExitEdit}
            autoFocus={true}
          />
        ) : (
          <>
            <BadgeContainer style={{ left: "12px", top: "-4px" }}>
              <Badge
                themeColor={themeColor[status as keyof typeof themeColor]}
                style={{ zIndex: 0 }}
              >
                {props.tasks && props.tasks.length}
              </Badge>
            </BadgeContainer>
            <span style={{ marginLeft: "30px" }}>{title}</span>
          </>
        )}
      </div>
      <span className={"k-spacer"} />
      <div
        className={classNames("k-taskboard-column-header-actions", {
          "k-disabled": edit,
        })}
      >
        <Button
          fillMode="flat"
          icon="edit"
          title={props.editButtonTitle}
          onClick={props.onColumnEnterEdit}
        />
        <Button
          fillMode="flat"
          icon="add"
          title={props.addButtonTitle}
          onClick={props.onShowAddCardDialog}
        />
        <Button
          fillMode="flat"
          icon="close"
          title={props.closeButtonTitle}
          onClick={props.onColumnDelete}
        />
      </div>
    </div>
  );
};

export const Column = (props: KendoTaskBoardColumnProps) => {
  return <KendoTaskBoardColumn {...props} header={ColumnHeader} />;
};