import { CheckIcon } from '@heroicons/react/outline';
import * as React from 'react';
import { Status } from '../../models/Status';

export interface IStepProps {
  name: string;
  description: string;
  status: Status;
  showLine: boolean;
  onClick?: () => void;
}

export const Step: React.FunctionComponent<IStepProps> = ({name, description, status, showLine, onClick}: React.PropsWithChildren<IStepProps>) => {
  return (
    <>
      {
        showLine ? (
          <div className={`-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full ${status === Status.Completed ? "bg-teal-600" : "bg-gray-300"}`} aria-hidden="true" />
        ) : null
      }

      <button className={`relative flex items-start group text-left ${onClick ? "" : "cursor-default"}`} onClick={() => { if (onClick) { onClick(); } }} disabled={!onClick}>
        {
          status === Status.NotStarted && (
            <span className="h-9 flex items-center" aria-hidden="true">
              <span className={`relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full ${onClick ? "group-hover:text-gray-400" : ""}`}>
                <span className={`h-2.5 w-2.5 bg-transparent rounded-full ${onClick ? "group-hover:bg-gray-300" : ""}`} />
              </span>
            </span>
          )
        }

        {
          status === Status.Active && (
            <span className="h-9 flex items-center" aria-hidden="true">
              <span className="relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-teal-600 rounded-full">
                <span className="h-2.5 w-2.5 bg-teal-600 rounded-full" />
              </span>
            </span>
          )
        }

        {
          status === Status.Completed && (
            <span className="h-9 flex items-center">
              <span className="relative z-10 w-8 h-8 flex items-center justify-center bg-teal-600 rounded-full group-hover:bg-teal-800">
                <CheckIcon className="w-5 h-5 text-white" aria-hidden="true" />
              </span>
            </span>
          )
        }

        <span className="ml-4 min-w-0 flex flex-col">
          <span className="text-xs font-semibold tracking-wide uppercase text-vulcan-500 dark:text-whisper-500">{name}</span>
          <span className="text-sm text-vulcan-400 dark:text-whisper-600" dangerouslySetInnerHTML={{__html: description}} />
        </span>
      </button>
    </>
  );
};