import { CoreButton } from "../../core/ui/button/button";
import { Icon } from "../../core/ui/icons/icons";
import { Dropdown } from "antd";
import { CoreText, CoreTextType } from "../../core/ui/text/text";
import { ProcessStatus } from "../dataset/dataset_model";
import { IMenuItem } from "../dataset/card_dataset";
import type { MenuProps } from "antd";

export interface ISkillCardProps {
  processStatus?: string;
  name?: string;
  isFinished?: boolean;
  id?: string;
  emptyOnClick?: Function;
  startOnClick?: (id: string) => void;
  continueOnClick?: (id: string) => void;
  empty: boolean;
  onEdit?: (id: string) => void;
  onDelete?: (id: string) => void;
}

export const SkillCard = (props: ISkillCardProps) => {
  const menu: IMenuItem[] = [
    {
      onClick: () => {
        if (props.onEdit && props.id) props.onEdit(props.id);
      },
      name: "Редактировать",
    },
    {
      onClick: () => {
        if (props.onDelete && props.id) props.onDelete(props.id);
      },
      name: "Удалить",
    },
  ];
  
  const items: MenuProps["items"] = menu.map((el, index) => {
    return {
      key: String(index),
      label: <CoreText text={el.name} type={CoreTextType.medium} />,
      onClick: () => el.onClick(props.id),
    };
  });
  return (
    <div
      style={{
        margin: 10,
        backgroundColor: "#f7f2fa",
        borderRadius: 10,
        padding: 10,
        width: 150,
        height: "max-content",
        alignContent: "center",
        display: "flex",
        flexDirection: "column",
        alignItems: "stretch",
        justifyContent: "space-between",
      }}
    >
      {props.empty ? (
        <div
          onClick={() => {
            if (props.empty && props.emptyOnClick) props.emptyOnClick();
          }}
          style={{ display: "flex", justifyContent: "center", alignItems: "center" }}
        >
          <Icon type="PlusCircle" />
        </div>
      ) : (
        <>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <CoreText text={props.name ?? ""} type={CoreTextType.medium} />
            <Dropdown overlayStyle={{ backgroundColor: "rgba(243, 237, 247, 1)" }} menu={{ items }}>
              <div>
                <Icon type="Settings" />
              </div>
            </Dropdown>
          </div>
          <div style={{ height: 10 }} />
          <div>
            {props.processStatus === ProcessStatus.NONE ? (
              <>
                <CoreButton
                  text="старт"
                  onClick={() => {
                    if (props.startOnClick && props.id) props.startOnClick(props.id);
                  }}
                />
                <div style={{ height: 10 }} />
                <CoreButton
                  text="продолжить"
                  onClick={() => {
                    if (props.continueOnClick && props.id) props.continueOnClick(props.id);
                  }}
                />
              </>
            ) : null}
            {props.processStatus === ProcessStatus.END ? (
              <>
                <CoreButton
                  text="старт"
                  onClick={() => {
                    if (props.startOnClick && props.id) props.startOnClick(props.id);
                  }}
                />
                <div style={{ height: 10 }} />
                <CoreButton
                  text="продолжить"
                  onClick={() => {
                    if (props.continueOnClick && props.id) props.continueOnClick(props.id);
                  }}
                />
              </>
            ) : null}
            {props.processStatus === ProcessStatus.RUN ? (
              <>
                <CoreButton
                  onClick={() => {
                    // if (props.type.isEqual(CardDataSetType.COMPLETED) && props.onClickButton && props.id) {
                    //   props.onClickButton(props.id);
                  }}
                  block={true}
                  text="Стоп"
                />
              </>
            ) : null}
            {props.processStatus === ProcessStatus.ERROR ? (
              <CoreButton
                style={{
                  backgroundColor: "red",
                }}
                onClick={() => {}}
                filled={true}
                text="Ошибка"
              />
            ) : null}
          </div>
        </>
      )}
    </div>
  );
};