import React, {useEffect, useState} from 'react'

import type {MoneyManagement, Timeframe} from '../../../generated/ManagingApi'
import FormInput from '../../mollecules/FormInput/FormInput'
import {useCustomMoneyManagement} from '../../../app/store/customMoneyManagement'

type ICustomMoneyManagement = {
  onCreateMoneyManagement: (moneyManagement: MoneyManagement) => void
  timeframe: Timeframe
  showCustomMoneyManagement: boolean
}

const CustomMoneyManagement: React.FC<ICustomMoneyManagement> = ({
  onCreateMoneyManagement,
  timeframe,
  showCustomMoneyManagement,
}) => {
  const { moneyManagement, setCustomMoneyManagement } = useCustomMoneyManagement()

  const [leverage, setLeverage] = useState<number>(moneyManagement?.leverage || 1)
  const [takeProfit, setTakeProfit] = useState<number>(moneyManagement?.takeProfit || 2)
  const [stopLoss, setStopLoss] = useState<number>(moneyManagement?.stopLoss || 1)

  const handleCreateMoneyManagement = () => {
    const moneyManagement: MoneyManagement = {
      leverage,
      name: 'custom',
      stopLoss,
      takeProfit,
      timeframe,
    }
    onCreateMoneyManagement(moneyManagement)
    setCustomMoneyManagement(moneyManagement)
  }

  useEffect(() => {
    handleCreateMoneyManagement()
  }, [leverage, takeProfit, stopLoss])

  return (
    <>
      {showCustomMoneyManagement ? (
        <div className="collapse bg-base-200">
          <input type="checkbox" />
          <div className="collapse-title text-xs font-medium">
            Custom MoneyManagement
          </div>
          <div className="collapse-content">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <FormInput label="Leverage" htmlFor="leverage" inline={false}>
                <input
                  id="leverage"
                  value={leverage}
                  max="50"
                  min="1"
                  step="1"
                  onChange={(e: any) => setLeverage(e.target.value)}
                  type='number'
                  className='input input-bordered w-full'
                ></input>
              </FormInput>

              <FormInput label="TP %" htmlFor="takeProfit" inline={false}>
                <input
                  id="takeProfit"
                  value={takeProfit}
                  onChange={(e: any) => setTakeProfit(e.target.value)}
                  step="0.01"
                  max="100"
                  type='number'
                  className='input input-bordered w-full'
                ></input>
              </FormInput>

              <FormInput label="SL %" htmlFor="stopLoss" inline={false}>
                <input
                  id="stopLoss"
                  value={stopLoss}
                  onChange={(e: any) => setStopLoss(e.target.value)}
                  step="0.01"
                  max="100"
                  type='number'
                  className='input input-bordered w-full'
                ></input>
              </FormInput>
            </div>
          </div>
        </div>
      ) : null}
    </>
  )
}

export default CustomMoneyManagement
