import React from 'react'
import { map } from 'lodash'
import { seq } from '../lib/lib'

import { NETWORK_STATES } from '../lib/constants'

const StatusIndicator = props =>
  <div className={`flex h-9 align-center ${props.c2} flex-shrink-0`}>
    <div className={`${props.c1} h-9`}>
      {
        props.error === true ? <Ex /> : <Check />
      }
    </div>
    <p className={'pr-4 text-sm text-600 c-white m-0'}>
      { props.message }
    </p>
  </div>

const ChooseIndicator = props =>
  props.network === NETWORK_STATES.ONLINE
  ? <StatusIndicator
      message={'You are online.'}
      c1={'bg-red'}
      c2={'bg-red'}
      error
    />
  : props.network === NETWORK_STATES.OFFLINE
  ? <StatusIndicator
      message={'You are offline.'}
      c1={'bg-green'}
      c2={'bg-green'}
    />
  : <StatusIndicator
      message={'Checking network connection..'}
      c1={'bg-orange'}
      c2={'bg-orange'}
    />

const ProgressIndicator = ({ currentStep, totalSteps }) =>
  <div className={'relative h-9 col- mb-0'}>
    <div className={'absolute ml-3 h-9 flex align-center text-sm white text-600'}>{`Step ${currentStep} of ${totalSteps}`}</div>
    <div className={'flex'}>
    {
      seq(totalSteps).map((step, index) => <div className={`${ index+1 > currentStep ? 'bg-gray' : 'bg-blue' } h-9 col-`}>{''}</div> )
    }
    </div>

  </div>


const Header = props =>
  <header className={'col'}>
    <div className={'flex justify-between'}>
      <ProgressIndicator
        totalSteps={props.totalSteps}
        currentStep={props.currentStep}
      />
      <ChooseIndicator
        network={ props.network }
      />
    </div>
    <div className={'col-md-8 h-15 flex align-center'}>
      <h1 className={'m-0 p-0'}>{'Wallet Generator'}</h1>
    </div>
  </header>



const Ex = () => {
  return (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="36" height="36" />
      <path fillRule="evenodd" clipRule="evenodd" d="M16.2857 18L12 22.2857L13.7143 24L18 19.7143L22.2857 24L24 22.2857L19.7143 18L23.9999 13.7143L22.2857 12L18 16.2857L13.7143 12L12 13.7143L16.2857 18Z" fill="white"/>
    </svg>
  )
}

const Check = () => {
  return (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="36" height="36"/>
      <path fillRule="evenodd" clipRule="evenodd" d="M24.9999 14.6329L23.2766 13L16.1699 19.7341L12.7233 16.4682L11 18.1012L16.1699 23L17.2451 21.9812L17.8932 21.3671L24.9999 14.6329Z" fill="white"/>
    </svg>
  )
}

export default Header