/* eslint-disable @typescript-eslint/camelcase */
import { BackupStates, ContinentInfo, RecoveryStates } from "anastasis-core";
import { h, VNode } from "preact";
import { useState } from "preact/hooks";
import { useAnastasisContext } from "../../context/anastasis";
import { AnastasisClientFrame, withProcessLabel } from "./index";

export function ContinentSelectionScreen(): VNode {
  const reducer = useAnastasisContext()

  //FIXME: remove this when #7056 is fixed
  const [countryCode, setCountryCode] = useState("")

  if (!reducer || !reducer.currentReducerState || !("continents" in reducer.currentReducerState)) {
    return <div />
  }
  const selectContinent = (continent: string): void => {
    reducer.transition("select_continent", { continent })
  };
  const selectCountry = (country: string): void => {
    setCountryCode(country)
  };
  
  
  const continentList = reducer.currentReducerState.continents || [];
  const countryList = reducer.currentReducerState.countries || [];
  const theContinent = reducer.currentReducerState.selected_continent || ""
  // const cc = reducer.currentReducerState.selected_country || "";
  const theCountry = countryList.find(c => c.code === countryCode)
  const selectCountryAction = () => {
    //selection should be when the select box changes it value
    if (!theCountry) return;
    reducer.transition("select_country", {
      country_code: countryCode,
      currencies: [theCountry.currency],
    })
  }

  const step1 = reducer.currentReducerState.backup_state === BackupStates.ContinentSelecting ||
    reducer.currentReducerState.recovery_state === RecoveryStates.ContinentSelecting;

  const errors = !theCountry ? "Select a country" : undefined 

  return (
    <AnastasisClientFrame hideNext={errors} title={withProcessLabel(reducer, "Select location")} onNext={selectCountryAction}>
      <div class="columns">
        <div class="column is-half">
          <div class="field">
            <label class="label">Continent</label>
            <div class="control has-icons-left">
              <div class="select " >
                <select onChange={(e) => selectContinent(e.currentTarget.value)} value={theContinent} disabled={!step1}>
                  <option key="none" disabled selected value=""> Choose a continent </option>
                  {continentList.map(prov => (
                    <option key={prov.name} value={prov.name}>
                      {prov.name}
                    </option>
                  ))}
                </select>
                <div class="icon is-small is-left">
                  <i class="mdi mdi-earth" />
                </div>
              </div>
              {!step1 && <span class="control">
                <a class="button is-danger" onClick={() => reducer.back()}>
                  X
                </a>
              </span>}
            </div>
          </div>

          <div class="field">
            <label class="label">Country</label>
            <div class="control has-icons-left">
              <div class="select" >
                <select onChange={(e) => selectCountry((e.target as any).value)} disabled={!theContinent} value={theCountry?.code || ""}>
                  <option key="none" disabled selected value=""> Choose a country </option>
                  {countryList.map(prov => (
                    <option key={prov.name} value={prov.code}>
                      {prov.name}
                    </option>
                  ))}
                </select>
                <div class="icon is-small is-left">
                  <i class="mdi mdi-earth" />
                </div>
              </div>
            </div>
          </div>

          {theCountry && <div class="field">
            <label class="label">Available currencies:</label>
            <div class="control">
              <input class="input is-small" type="text" readonly value={theCountry.currency} />
            </div>
          </div>}
        </div>
        <div class="column is-half">
          <p>
            A location will help to define a common information that will be use to locate your secret and a currency
            for payments if needed.
          </p>
        </div>
      </div>

    </AnastasisClientFrame>
  );
}