import React from 'react'
import PropTypes from 'prop-types'
import ReactModal from 'react-modal'

import { FaClose } from 'react-icons/lib/fa'

import StepOne from './StepOne'
import StepTwo from './StepTwo'
import StepThree from './StepThree'
import StepFour from './StepFour'
import Footer from './Footer'

import styles from './ChannelForm.scss'

const ChannelForm = ({
  channelform,
  closeChannelForm,
  changeStep,
  setNodeKey,
  setLocalAmount,
  setPushAmount,
  channelFormHeader,
  channelFormProgress,
  peers
}) => {
  const renderStep = () => {
    const { step } = channelform

    switch (step) {
      case 1:
        return <StepOne peers={peers} changeStep={changeStep} setNodeKey={setNodeKey} />
      case 2:
        return <StepTwo local_amt={channelform.local_amt} setLocalAmount={setLocalAmount} />
      case 3:
        return <StepThree push_amt={channelform.push_amt} setPushAmount={setPushAmount} />
      default:
        return <StepFour node_key={channelform.node_key} local_amt={channelform.local_amt} push_amt={channelform.push_amt} />
    }
  }
  
  return (
    <ReactModal
      isOpen={channelform.isOpen}
      ariaHideApp
      shouldCloseOnOverlayClick
      contentLabel='No Overlay Click Modal'
      onRequestClose={closeChannelForm}
      parentSelector={() => document.body}
      className={styles.modal}
    >
      <div onClick={closeChannelForm} className={styles.modalClose}>
        <FaClose className={styles.close} />
      </div>

      <header className={styles.header}>
        <h3>{channelFormHeader}</h3>
        <div className={styles.progress} style={{ width: `${channelFormProgress}%` }}></div>
      </header>

      <div className={styles.content}>
        {renderStep()}
      </div>

      <Footer step={channelform.step} changeStep={changeStep} />
    </ReactModal>
  )
}

ChannelForm.propTypes = {}

export default ChannelForm