import React from "react"
import { CheckIcon } from "./check-icon"

interface StepProps {
  label: string
  description: string
  complete?: boolean
  current?: boolean
  actionLabel?: string
  onClickAction?: () => void
}

interface StepStageProps {
  label: string
  description: string
  actionLabel?: string
  onClickAction?: () => void
}

interface StepSuccessProps {
  label: string
  description: string
  current: boolean
}

const StepComplete:React.FC<StepStageProps> = ({
  label,
  description,
}) => {
  return (
    <li className="relative pb-10">
      <div className="-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-indigo-600"></div>
      <a className="relative flex items-start space-x-4 group focus:outline-none">
        <div className="h-9 flex items-center">
          <span className="relative top-3 z-10 w-8 h-8 flex items-center justify-center bg-indigo-600 rounded-full group-hover:bg-indigo-800 group-focus:bg-indigo-800 transition ease-in-out duration-150">
            <CheckIcon />
          </span>
        </div>
        <div className="min-w-0">
          <h3 className="text-xl leading-8 font-semibold uppercase tracking-wider">{label}</h3>
          <p className="text-lg leading-6 text-gray-400">{description}</p>
        </div>
      </a>
    </li>
  )
}

const StepCurrent:React.FC<StepStageProps> = ({
  label,
  description,
  actionLabel,
  onClickAction,
}) => {
  return (
    <li className="relative pb-10">
      <div className="-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300"></div>

      {
        actionLabel &&
          <div className="absolute top-2 min-w-32" style={{right: 'calc(100% + 20px)'}}>
            <button
              onClick={onClickAction}
              type="button"
              className="block px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
              {actionLabel}
            </button>
          </div>
      }

      <div className="relative flex items-start space-x-4 group focus:outline-none">
        <div className="h-9 flex items-center">
          <span className="relative top-3 z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-indigo-600 rounded-full">
            <span className="h-2.5 w-2.5 bg-indigo-600 rounded-full"></span>
          </span>
        </div>
        <div className="min-w-0">
          <h3 className="text-xl leading-8 font-semibold uppercase tracking-wider text-indigo-600">{label}</h3>
          <p className="text-lg leading-6 text-gray-400">{description}</p>
        </div>
      </div>
    </li>
  )
}

const StepUncomplete: React.FC<StepStageProps> = ({
  label,
  description,
}) => {
  return (
    <li className="relative pb-10">
      <a className="relative flex items-start space-x-4 group focus:outline-none">
        <div className="h-9 flex items-center">
          <span className="relative top-3 z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400 group-focus:border-gray-400 transition ease-in-out duration-150">
            <span className="h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300 group-focus:bg-gray-300 transition ease-in-out duration-150"></span>
          </span>
        </div>
        <div className="min-w-0">
          <h3 className="text-xl leading-8 font-semibold uppercase tracking-wider text-white">{label}</h3>
          <p className="text-lg leading-6 text-gray-400">{description}</p>
        </div>
      </a>
    </li>
  )
}

export const StepSuccess: React.FC<StepSuccessProps> = ({
  label,
  description,
  current = false
}) => {
  if ( !current ) return null

  return (
    <li className="relative pb-10">
      <a className="relative flex items-start space-x-4 group focus:outline-none">
        <div className="h-9 flex items-center">
          <span className="relative top-3 z-10 w-8 h-8 flex items-center justify-center bg-green-400 rounded-full group-hover:bg-green-800 group-focus:bg-green-800 transition ease-in-out duration-150">
            <CheckIcon />
          </span>
        </div>
        <div className="min-w-0">
          <h3 className="text-xl leading-8 font-semibold uppercase tracking-wider">{label}</h3>
          <p className="text-lg leading-6 text-gray-400">{description}</p>
        </div>
      </a>
    </li>
  )
}

export const Step:React.FC<StepProps> = ({
  label, description, actionLabel, onClickAction,
  complete = false, current = false
}) => {
  if (current) {
    return <StepCurrent {...{label, description, actionLabel, onClickAction}} />
  } else if (complete) {
    return <StepComplete {...{label, description, actionLabel, onClickAction}} />
  } else {
    return <StepUncomplete {...{label, description, actionLabel, onClickAction}} />
  }
}