import { cn } from "@/utils/class-merge";
import { FunctionComponent } from "preact";
import { MouseEventHandler } from "preact/compat";
import { tv } from "tailwind-variants";
import classes from "./task.module.scss";

interface TaskProps {
  name: string;
  priority?: number;
  checked?: boolean;
  overdue?: boolean;
  onClick?: () => void;
  onMarkClick?: MouseEventHandler<HTMLParagraphElement>;
}

const taskStyle = tv({
  base: "hover:scale-[1.1]active:scale-[1.1] flex aspect-square h-full flex-col items-center justify-center rounded-full border transition-[scale] duration-100 ease-in-out select-none",
  variants: {
    checked: {
      true: "bg-black",
      false: "bg-white",
    },
  },
});

const markStyle = tv({
  base: "text-4xl font-light text-white",
  variants: {
    checked: {
      true: "block",
      false: "hidden",
    },
  },
});

const Task: FunctionComponent<TaskProps> = ({
  name,
  checked = false,
  onClick = () => {},
  onMarkClick = () => {},
  priority = 4,
  overdue,
}) => {
  return (
    <div class="w-[95%]">
      <div
        class={cn(
          classes.task,
          { "bg-[linear-gradient(90.00deg,rgba(18,26,230,0.29),rgba(251,194,199,0.34)_100%)]": priority == 1 },
          { "bg-[linear-gradient(90.00deg,rgba(97,200,232,0.6),rgba(251,194,199,0.42)_100%)]": priority == 2 },
          { "bg-[linear-gradient(90.00deg,rgba(247,220,52,0.61),rgba(251,194,199,0.38)_97.71%)]": priority == 3 },
          { "bg-[rgba(251,194,199,0.53)] hover:bg-[rgba(251,194,199,0.7)]": priority == 4 }
        )}
        onClick={onClick}
      >
        <div
          class={taskStyle({ checked })}
          onClick={(e) => {
            e.stopPropagation();
            onMarkClick(e);
          }}
        >
          <p class={markStyle({ checked })}>✓</p>
        </div>
        {name}
        {overdue && !checked && <span class="absolute top-2 right-16 text-xs text-red-500">Просрочено</span>}
      </div>
    </div>
  );
};

Task.displayName = "AHTask";

export default Task;
