import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import { fetchReferralInfoAsync } from 'state/actions'
import { useAccount } from 'state/userInfo/hooks'
import { useReferralIsCommander } from 'state/referral/hooks'
import { useDispatch } from 'react-redux'
import UnunitedCom from './components/UnunitedCom'
import ConnectedCom from './components/Connected'
import RegimentalCom from './components/Regimental'

const MainDiv = styled.div`
  min-height: calc(100vh - 64px);
  background-image: url('/images/recommend/bg.svg');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
`

const ContentDiv = styled.div`
  width: 50%;
  background: rgba(255, 255, 255, 0.39);
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
  border-radius: 40px;

  /* ${({ theme }) => theme.mediaQueries.sm} {
    width: 60%;
  }

  ${({ theme }) => theme.mediaQueries.lg} {
    width: 60%;
  }
  ${({ theme }) => theme.mediaQueries.xs} {
    width: 60%;
  } */
`

const Nft: React.FC = () => {
  const dispatch = useDispatch()
  const account = useAccount()

  const referralIsCommander = useReferralIsCommander()
  useEffect(() => {
    dispatch(fetchReferralInfoAsync(account))
  }, [account, referralIsCommander])

  return (
    <MainDiv>
      {referralIsCommander ? (
        <>
          {account ? (
            <RegimentalCom />
          ) : (
            <ContentDiv>
              <UnunitedCom />
            </ContentDiv>
          )}
        </>
      ) : (
        <ContentDiv>{account ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>
      )}
    </MainDiv>
  )
}
export default Nft