/* eslint-disable @typescript-eslint/no-explicit-any */


import styles from '../personal-info/account-steps.module.scss'
import investmentChoiceData from '../../../../../../data/investment-choice.json'
import currenciesData from '../../../../../../data/countries-currencies.json'
import { FaLongArrowAltLeft } from 'react-icons/fa'

interface TradingProfileProps {
  handlePrevClick: any;
  value: any;
  setData: any;
}

const TradingProfile = ({ handlePrevClick, value, setData }: TradingProfileProps) => {
  const { investmentChoice, tradingCurrency, investorType, experiencedInvestor } = value
  return (
    <div className={styles['steps']}>
      <h2>Trading Profile</h2>
      <p>Update your trading preferences according to your strategy</p>
      <div>
        <div className={styles['steps__row']}>
          <div>
            <label htmlFor="investment-choice">Preferred investment *</label>
            <select
              value={investmentChoice}
              onChange={(e) => setData('investmentChoice', e.target.value)}
            >
              <option disabled selected value="">
                Select your investment choice
              </option>
              {investmentChoiceData?.map((investment) => (
                <option key={investment?.id} value={investment?.name}>
                  {investment?.name}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label htmlFor="trading-currency">Trading currency *</label>
            <select
              value={tradingCurrency}
              onChange={(e) => setData('tradingCurrency', e.target.value)}
            >
              <option disabled selected value="">
                Select trading currency of choice
              </option>
              {currenciesData?.map((currency) => (
                <option key={currency?.country} value={currency?.currency_code}>
                  {currency?.currency_code}
                </option>
              ))}
            </select>
          </div>
        </div>

        <div className={styles['steps__row']}>
          <div>
            <label htmlFor="investor-type">Investor type *</label>
            <select value={investorType} onChange={(e) => setData('investorType', e.target.value)}>
              <option disabled selected value="">
                What describe your strategy best
              </option>
              <option value="long-term">Long term</option>
              <option value="short-term">Short term</option>
            </select>
          </div>

          <div>
            <label htmlFor="experience-level">Are you an experinced investor *</label>
            <select
              value={experiencedInvestor}
              onChange={(e) => setData('experiencedInvestor', e.target.value)}
            >
              <option disabled selected value="">
                What describe your level of experience
              </option>
              <option value="not-experinced">Not Experienced</option>
              <option value="fairly-experienced">Fairly Experienced</option>
              <option value="experienced">Experienced</option>
            </select>
          </div>
        </div>
      </div>

      <div className={styles['steps__buttons']}>
        <div onClick={handlePrevClick} className={styles['steps__buttons__button--prev']}>
          <FaLongArrowAltLeft /> Prev Step
        </div>
      </div>
      <br />
      <button>Update Profile</button>
    </div>
  )
}

export default TradingProfile