import React, { useState } from 'react'
//styles
import companyIcon from '../../../companyIcon.png'
import interviewIcon from '../../../interviewIcon.png'
import { Flex, Avatar, Image } from '@chakra-ui/core'
import AOS from 'aos'
import 'aos/dist/aos.css'

//components
import InterviewForm from './InterviewForm'
import CompanyReviewForm from './CompanyReviewForm'
import ProgressHeader from './ProgressHeader'

const FormController = ({ history }) => {
  // initialize AOS
  AOS.init()
  // state to show interview review
  const [showInterview, setShowInterview] = useState(false)
  // state to show company review
  const [showCompanyReview, setShowCompanyReview] = useState(false)
  //progress bar
  const [progress] = useState({
    prec: 99,
    prog: 0,
  })

  return (
    // main container
    <>
      <ProgressHeader progress={progress} />


      {/* Start of messenger  */}
      {/* form container */}
      <Flex margin="0 auto" width="80%">
        <Flex flexDir="column" pt="5%" width="100%">

          <Flex
            align="center"
            p="1%"
            ml="2%"
            w="45%"
            mt="20%"
            mb="2%"
            bg="#F2F6FE"
            position="relative"
            right="0"
            bottom=" 0"
            left="0"
            rounded="20px"
            data-aos="fade-right"
            data-aos-offset="200"
            data-aos-delay="50"
            data-aos-duration="1000"
            data-aos-easing="ease-in-out"
            data-aos-mirror="false"
            data-aos-once="false"
          >
            <p>
              Hi {localStorage.getItem('username')},{' '}
              <span role="img" aria-label="smile">
                🙂
              </span>{' '}
              Thank you for choosing to post.
            </p>
          </Flex>
          <Flex
            align="center"
            p="1%"
            ml="2%"
            w="50%"
            mb="2%"
            bg="#F2F6FE"
            rounded="20px"
            data-aos="fade-right"
            data-aos-offset="200"
            data-aos-delay="1000"
            data-aos-duration="1000"
            data-aos-easing="ease-in-out"
            data-aos-mirror="true"
            data-aos-once="false"
          >
            <p>
              Sharing your experience through your posts encourages others to do
              the same and promotes the exchange of helpful information
            </p>
          </Flex>
          <Flex
            align="center"
            p="1%"
            ml="2%"
            w="45%"
            mb="8%"
            bg="#F2F6FE"
            rounded="20px"
            data-aos="fade-right"
            data-aos-offset="200"
            data-aos-delay="2500"
            data-aos-duration="1000"
            data-aos-easing="ease-in-out"
            data-aos-mirror="true"
            data-aos-once="false"
          >
            <p>What do you want to post about?</p>
          </Flex>
          {/* company container  */}

          <Flex w="100%" justify="flex-end" pb="5%">
            {/* company box */}
            <Flex
              w="36%"
              px="6%"
              py="5%"

              border="1px solid #EAF0FE"
              rounded="6px"
              flexDir="column"
              data-aos="fade-in"
              data-aos-offset="200"

              data-aos-delay="1500"

              data-aos-duration="2000"
              data-aos-easing="ease-in-out"
              data-aos-mirror="true"
              data-aos-once="false"
              align="center"
            >
              <Flex w="100%" color="#494B5B" fontSize="20px" fontWeight="light">
                Choose a topic
              </Flex>
              <Flex justify="space-between" mt="3%" align="center" width="60%">
                <Flex
                  justify="center"
                  align="center"
                  w="100px"
                  h="100px"
                  onClick={() => {
                    setShowInterview(true)
                    setShowCompanyReview(false)
                  }}
                  data-cy="interviewReviewButton"
                >
                  <Image src={interviewIcon} alt="Interview Review Icon" />
                </Flex>
                <Flex
                  justify="center"
                  ml="40%"
                  w="100px"
                  h="100px"
                  mb="10%"
                  onClick={() => {
                    setShowInterview(false)
                    setShowCompanyReview(true)
                  }}
                  data-cy="companyReviewButton"
                >
                  <Image src={companyIcon} alt="Company Review Icon" />
                </Flex>
              </Flex>

              <Flex w="100%" mt="1%" justify="space-evenly">
                <Flex
                  as="h4"
                  w="96px"
                  h="44px"
                  textAlign="center"
                  color="#494B5B"
                  fontWeight="light"
                  fontSize="16px"
                >
                  Interview Review
                </Flex>
                <Flex
                  as="h4"
                  w="96px"
                  h="44px"
                  textAlign="center"
                  color="#494B5B"
                  fontWeight="light"
                  fontSize="16px"
                >
                  Company Review
                </Flex>
              </Flex>
            </Flex>
            {/* avatar */}
            <Flex
              align="flex-end"
              ml="1%"
              mr="2%"
              data-aos="fade-in"
              data-aos-offset="200"
              data-aos-delay="3000"
              data-aos-duration="2000"
              data-aos-easing="ease-in-out"
              data-aos-mirror="true"
              data-aos-once="false"
              justify="flex-end"
            >
              <Flex align="center" justify="space-evenly" width="40%" mt="3%">
                <Avatar size="md" src="https://bit.ly/broken-link" />
              </Flex>
            </Flex>
          </Flex>
          {showInterview ? <InterviewForm history={history} /> : null}
          {showCompanyReview ? <CompanyReviewForm history={history} /> : null}
        </Flex>
      </Flex>
    </>
  )
}

export default FormController