import React, {useEffect, useState} from 'react'
import type {SubmitHandler} from 'react-hook-form'
import {useForm} from 'react-hook-form'
import 'react-toastify/dist/ReactToastify.css'

import useApiUrlStore from '../../app/store/apiStore'
import {Toast} from '../../components/mollecules'
import type {IndicatorViewModel} from '../../generated/ManagingApi'
import {IndicatorType, ScenarioClient, Timeframe,} from '../../generated/ManagingApi'

import IndicatorTable from './indicatorTable'

interface IIndicatorFormInput {
  type: IndicatorType
  timeframe: Timeframe
  name: string
  period: number
  fastPeriods: number
  slowPeriods: number
  signalPeriods: number
  multiplier: number
  stochPeriods: number
  smoothPeriods: number
  cyclePeriods: number
}

const IndicatorList: React.FC = () => {
  const [indicatorType, setIndicatorType] = useState<IndicatorType>(
    IndicatorType.RsiDivergence
  )
  const [indicators, setIndicators] = useState<IndicatorViewModel[]>([])
  const [showModal, setShowModal] = useState(false)
  const { register, handleSubmit } = useForm<IIndicatorFormInput>()
  const { apiUrl } = useApiUrlStore()
  const scenarioClient = new ScenarioClient({}, apiUrl)

  async function createIndicator(form: IIndicatorFormInput) {
    const t = new Toast('Creating indicator')
    await scenarioClient
      .scenario_CreateIndicator(
        form.type,
        form.name,
        form.period,
        form.fastPeriods,
        form.slowPeriods,
        form.signalPeriods,
        form.multiplier,
        form.stochPeriods,
        form.smoothPeriods,
        form.cyclePeriods
      )
      .then((indicator: IndicatorViewModel) => {
        t.update('success', 'Indicator created')
        setIndicators((arr) => [...arr, indicator])
      })
      .catch((err: any) => {
        t.update('error', err)
      })
  }

  function setIndicatorTypeEvent(e: any) {
    setIndicatorType(e.target.value)
  }

  const onSubmit: SubmitHandler<IIndicatorFormInput> = async (form) => {
    closeModal()
    await createIndicator(form)
  }

  useEffect(() => {
    scenarioClient.scenario_GetIndicators().then((data: IndicatorViewModel[]) => {
      setIndicators(data)
    })
  }, [])

  function openModal() {
    setShowModal(true)
  }

  function closeModal() {
    setShowModal(false)
  }

  return (
    <div>
      <div className="container mx-auto">
        <button className="btn" onClick={openModal}>
          Create indicator
        </button>
        <IndicatorTable list={indicators} />
        {showModal ? (
          <>
            <div>
              <form onSubmit={handleSubmit(onSubmit)}>
                <div className="modal modal-bottom sm:modal-middle modal-open">
                  <div className="modal-box">
                    <button
                      onClick={closeModal}
                      className="btn btn-sm btn-circle right-2 top-2 absolute"
                    >
                      ✕
                    </button>
                    <div className="text-primary mb-3 text-lg">
                      Indicator builder
                    </div>
                    <div className="form-control">
                      <div className="input-group">
                        <label htmlFor="name" className="label mr-6">
                          Name
                        </label>
                        <input
                          className="bg-inherit w-full max-w-xs"
                          {...register('name')}
                        ></input>
                      </div>
                    </div>
                    <div className="form-control">
                      <div className="input-group">
                        <label htmlFor="type" className="label mr-6">
                          Type
                        </label>
                        <select
                          className="select w-full max-w-xs"
                          {...register('type', {
                            onChange: (e) => {
                              setIndicatorTypeEvent(e)
                            },
                          })}
                        >
                          {Object.keys(IndicatorType).map((item) => (
                            <option key={item} value={item}>
                              {item}
                            </option>
                          ))}
                        </select>
                      </div>
                    </div>
                    <div className="form-control">
                      <div className="input-group">
                        <label htmlFor="timeframe" className="label mr-6">
                          Timeframe
                        </label>
                        <select
                          className="select w-full max-w-xs"
                          {...register('timeframe')}
                        >
                          {Object.keys(Timeframe).map((item) => (
                            <option key={item} value={item}>
                              {item}
                            </option>
                          ))}
                        </select>
                      </div>
                    </div>

                    {indicatorType == IndicatorType.EmaTrend ||
                    indicatorType == IndicatorType.RsiDivergence ||
                    indicatorType == IndicatorType.StDev ||
                    indicatorType == IndicatorType.EmaCross ||
                    indicatorType == IndicatorType.RsiDivergenceConfirm ? (
                      <>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Period
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="5"
                                className="input"
                                {...register('period')}
                              />
                            </label>
                          </div>
                        </div>
                      </>
                    ) : null}

                    {indicatorType == IndicatorType.MacdCross ? (
                      <>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Fast Periods
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="12"
                                className="input"
                                {...register('fastPeriods')}
                              />
                            </label>
                          </div>
                        </div>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Slow Periods
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="26"
                                className="input"
                                {...register('slowPeriods')}
                              />
                            </label>
                          </div>
                        </div>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Signal Periods
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="9"
                                className="input"
                                {...register('signalPeriods')}
                              />
                            </label>
                          </div>
                        </div>
                      </>
                    ) : null}

                    {indicatorType == IndicatorType.DualEmaCross ? (
                      <>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Fast Periods
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="9"
                                className="input"
                                {...register('fastPeriods')}
                              />
                            </label>
                          </div>
                        </div>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Slow Periods
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="21"
                                className="input"
                                {...register('slowPeriods')}
                              />
                            </label>
                          </div>
                        </div>
                      </>
                    ) : null}

                    {indicatorType == IndicatorType.Stc || indicatorType == IndicatorType.LaggingStc  ? (
                      <>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Fast Periods
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="23"
                                className="input"
                                {...register('fastPeriods')}
                              />
                            </label>
                          </div>
                        </div>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Slow Periods
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="50"
                                className="input"
                                {...register('slowPeriods')}
                              />
                            </label>
                          </div>
                        </div>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Cycle Periods
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="10"
                                className="input"
                                {...register('cyclePeriods')}
                              />
                            </label>
                          </div>
                        </div>
                      </>
                    ) : null}

                    {indicatorType == IndicatorType.SuperTrend ||
                    indicatorType == IndicatorType.SuperTrendCrossEma ||
                    indicatorType == IndicatorType.ChandelierExit ? (
                      <>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Period
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="10"
                                className="input"
                                {...register('period')}
                              />
                            </label>
                          </div>
                        </div>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="multiplier" className="label mr-6">
                              Multiplier
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="3"
                                className="input"
                                step="any"
                                {...register('multiplier')}
                              />
                            </label>
                          </div>
                        </div>
                      </>
                    ) : null}

                    {indicatorType == IndicatorType.StochRsiTrend ? (
                      <>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Periods
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="14"
                                className="input"
                                {...register('period')}
                              />
                            </label>
                          </div>
                        </div>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Stoch Periods
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="14"
                                className="input"
                                {...register('stochPeriods')}
                              />
                            </label>
                          </div>
                        </div>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Signal Periods
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="3"
                                className="input"
                                {...register('signalPeriods')}
                              />
                            </label>
                          </div>
                        </div>
                        <div className="form-control">
                          <div className="input-group">
                            <label htmlFor="period" className="label mr-6">
                              Smooth Periods
                            </label>
                            <label className="input-group">
                              <input
                                type="number"
                                placeholder="1"
                                className="input"
                                {...register('smoothPeriods')}
                              />
                            </label>
                          </div>
                        </div>
                      </>
                    ) : null}
                    <div className="modal-action">
                      <button type="submit" className="btn">
                        Build
                      </button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </>
        ) : null}
      </div>
    </div>
  )
}

export default IndicatorList
