import { useState, useEffect } from 'react'
import { MdCheckCircle } from 'react-icons/md'
import { FaLayerGroup } from 'react-icons/fa'
import styles from '../steps.module.scss'

interface SignUpData {
  username: string
  phone: string
  gender: string
  preferredAsset: string
  experience: string
}

interface AccountInfoProps {
  handleNextClick: () => void
  handlePrevClick: () => void
  setData: (key: keyof SignUpData, value: string) => void
  value: SignUpData
}

const AccountInfo = ({
  handleNextClick,
  handlePrevClick,
  setData,
  value,
}: AccountInfoProps) => {
  const { preferredAsset } = value

  // Store asset choice as a string for clarity
  const [choice, setChoice] = useState<string>('crypto')

  // Toggle choice
  const toggleInvestmentChoice = (key: string) => {
    setChoice(key)
    setData('preferredAsset', key)
  }

  // Set default asset on mount
  useEffect(() => {
    if (!preferredAsset) {
      setData('preferredAsset', 'crypto')
      setChoice('crypto')
    } else {
      setChoice(preferredAsset)
    }
  }, [preferredAsset, setData])

  return (
    <div className={styles['steps']}>
      <h2>Asset Class *</h2>
      <p>Provide your preferred asset class according to your strategy</p>

      <div className={styles['steps--options']}>
        <label htmlFor="investment-choice">Preferred asset class *</label>

        {/* Crypto Trading */}
        <div
          onClick={() => toggleInvestmentChoice('crypto')}
          className={
            choice === 'crypto'
              ? styles['steps--options--item--active']
              : styles['steps--options--item']
          }
        >
          <span>
            <FaLayerGroup fill="#FF9800" size="1rem" />
          </span>
          <div>
            <h2>Crypto Trading</h2>
            <p>
              Interested in crypto
              opportunities.
            </p>
          </div>
          {choice === 'crypto' && <MdCheckCircle style={{ position: "absolute", right: "1rem" }} fill="#FF9B00" size="1.5rem" />}
        </div>

        {/* Forex Trading */}
        <div
          onClick={() => toggleInvestmentChoice('forex')}
          className={
            choice === 'forex'
              ? styles['steps--options--item--active']
              : styles['steps--options--item']
          }
        >
          <span>
            <FaLayerGroup fill="#FF9800" size="1rem" />
          </span>
          <div>
            <h2>Forex Trading</h2>
            <p>
              Interested in forex 
              opportunities.
            </p>
          </div>
          {choice === 'forex' && <MdCheckCircle style={{ position: "absolute", right: "1rem" }} fill="#FF9B00" size="1.5rem" />}
        </div>

        {/* Real Estate */}
        <div
          onClick={() => toggleInvestmentChoice('real-estate')}
          className={
            choice === 'real-estate'
              ? styles['steps--options--item--active']
              : styles['steps--options--item']
          }
        >
          <span>
            <FaLayerGroup fill="#FF9800" size="1rem" />
          </span>
          <div>
            <h2>Real Estate</h2>
            <p>
              Interested in the real estate
              opportunities.
            </p>
          </div>
          {choice === 'real-estate' && (
            <MdCheckCircle style={{ position: "absolute", right: "1rem" }} fill="#FF9B00" size="1.5rem" />
          )}
        </div>

        {/* Other Opportunities */}
        <div
          onClick={() => toggleInvestmentChoice('other')}
          className={
            choice === 'other'
              ? styles['steps--options--item--active']
              : styles['steps--options--item']
          }
        >
          <span>
            <FaLayerGroup fill="#FF9800" size="1rem" />
          </span>
          <div>
            <h2>Other Opportunities</h2>
            <p>
              I just want to grow my investment portfolio.
            </p>
          </div>
          {choice === 'other' && <MdCheckCircle style={{ position: "absolute", right: "1rem" }} fill="#FF9B00" size="1.5rem" />}
        </div>
      </div>

      <div className={styles['steps__buttons']}>
        <div
          onClick={handlePrevClick}
          className={styles['steps__buttons__button--prev']}
        >
          Prev Step
        </div>
        <div
          onClick={handleNextClick}
          className={styles['steps__buttons__button--next']}
        >
          Next Step 
        </div>
      </div>
    </div>
  )
}

export default AccountInfo