import { MouseEventHandler, ReactElement } from "react";

export type IconButtonProps = {
  onClick?: MouseEventHandler<HTMLButtonElement>;
  className: string;
  disabled: boolean;
  svgClassName?: string;
  direction: "Next" | "Back";
};

export default function ButtonStep(props: IconButtonProps): ReactElement {
  return (
    <button
      type="button"
      className={props.className}
      onClick={(event) => {
        if (props.onClick) {
          props.onClick(event);
        }
      }}
      disabled={props.disabled}
    >
      <svg
        className={`${props.direction === "Next" ? "" : "rotate-180"} ${
          props.svgClassName
        }`}
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M16.172 11L10.808 5.636L12.222 4.222L20 12L12.222 19.778L10.808 18.364L16.172 13H4V11H16.172Z"
          fill={props.disabled ? "#BEC3D7" : undefined}
        />
      </svg>
    </button>
  );
}

type FormStepProps = {
  onClick: MouseEventHandler<HTMLElement>;
  name: string;
};

export function FormStepBack({ onClick, name }: FormStepProps) {
  return (
    <div
      className="h-10 flex items-start cursor-pointer group md:min-w-[200px]"
      onClick={onClick}
    >
      <ButtonStep
        className="py-2 px-2 bg-interactive-secondary-default rounded-lg group-hover:bg-interactive-secondary-hover group-active:bg-interactive-secondary-pressed"
        disabled={false}
        direction="Back"
        svgClassName="fill-interactive-primary-default"
      />
      <div className="ml-4 hidden sm:block">
        <p className="mt-1 font-sans text-neutral-medium-dark text-xs font-bold leading-none text-left">
          Vorheriger Schritt:
        </p>
        <p className="text-neutral-very-dark font-mono font-bold tracking-wider leading-normal text-left line-clamp-1">
          {name}
        </p>
      </div>
    </div>
  );
}

export function FormStepNext({ onClick, name }: FormStepProps) {
  return (
    <div
      className="h-10 flex items-start cursor-pointer group min-w-0 truncate"
      onClick={onClick}
    >
      <div className="mr-4">
        <p className="mt-1 font-sans text-neutral-medium-dark text-xs font-bold leading-none text-right">
          Nächster Schritt:
        </p>
        <p className="text-neutral-very-dark font-mono font-bold tracking-wider leading-normal text-right line-clamp-1">
          {name}
        </p>
      </div>
      <ButtonStep
        className="py-2 px-2 bg-interactive-primary-default md:transition-all md:duration-200 rounded-lg group-hover:bg-interactive-primary-hover group-active:bg-interactive-primary-pressed"
        disabled={false}
        svgClassName="fill-white"
        direction="Next"
      />
    </div>
  );
}