import React, { useState, useCallback, useMemo } from "react";
import styled from "styled-components";
import { CountryProvince, PostalCode, PhoneNumber, EmailInput } from "@arcteryx/components-form";
import { useTranslation } from "react-i18next";
import longCountryList from "../../data/formstackCountries";
import shortCountryList from "../../data/countries";
import FsSelect from "../components/FsSelect";
import FsMultipleFileUpload from "../components/FsMultipleFileUpload";
import FsConfirmEmail from "../components/FsConfirmEmail";
import FsAdvisoryMsg from "../components/FsAdvisoryMsg";
import FsInputField from "../components/FsInputField";
import FsRichText from "../components/FsRichText";
import FsTextarea from "../components/FsTextarea";
import FsToggleButton from "../components/FsToggleButton";
import FsTopic from "./FsTopic";
import FsSubTopic from "./FsSubTopic";
import { removeSpecialChars } from "../helpers";

const FsField = styled.div`
  display: ${props => (props.isHidden ? "none" : "block")};
`;

const FsFields = ({
  fields,
  heading,
  register,
  watch,
  setValue,
  getValues,
  errors,
  country,
  countryId,
  provinceId,
  currentCountry,
  countryList,
  market = "outdoor",
  language = "en",
  hideFormBanner = false,
}) => {
  const { t } = useTranslation("components-formstack");
  const [ showOrderNumberInput, setShowOrderNumberInput ] = useState(false);
  const [ showSubTopicInput, setShowSubTopicInput ] = useState(true);
  const [ topicSelected, setTopicSelected ] = useState(null);
  const handleShowOrderNumberInput = useCallback(val => setShowOrderNumberInput(!val), [showOrderNumberInput]);
  const handleTopicSelected = useCallback(val => setTopicSelected(val), [topicSelected]);
  const handleShowSubTopicInput = useCallback(val => setShowSubTopicInput(!val), [showSubTopicInput]);
  const sortedLongCountryList = useMemo(() => {
    return longCountryList.slice().sort((a, b) =>
      a.full_name_english.localeCompare(b.full_name_english)
    );
  }, [countryList]);
  const countryListDropdownOptions = countryList === 'long' ? sortedLongCountryList : shortCountryList;

  return (
    <>
      {fields.map(({ id, type, label, name, required, fieldIds, hidden, ...props }) => {
        const isRequired = required === "1";
        const isHidden = hidden === "1";
        const sortedOptions = useMemo(() => {
          return props.options ? props.options.slice().sort((a, b) => a.label.localeCompare(b.label)) : [];
        }, [props.options]);

        if (type === "richtext" && heading?.includes("advisory")) {
          return <FsAdvisoryMsg id={id} key={id} text={props.section_text} hideFormBanner={hideFormBanner} />;
        }
        if (name.includes("province") || name.includes("state")) {
          return null;
        }
        if (name.includes("country") && provinceId) {
          return (
            <FsField key={id} isHidden={isHidden}>
              <CountryProvince
                countryName={id}
                provinceName={provinceId}
                required={isRequired}
                defaultCountry={country}
                register={register}
                errors={errors}
                watch={watch}
                countryList={countryListDropdownOptions}
                setValue={setValue}
              />
            </FsField>
          );
        }
        if (name.includes("postal")) {
          return (
            <FsField key={id} isHidden={isHidden}>
              <PostalCode
                id={id}
                name={id}
                countryName={countryId}
                watch={watch}
                required={isRequired}
                setValue={setValue}
                errors={errors}
                register={register}
              />
            </FsField>
          );
        }
        if (name.includes("subtopic")) {
          return (
            <FsField key={id} isHidden={showSubTopicInput}>
              <FsSubTopic
                id={id}
                name={id}
                label={t('Subtopic')}
                topicSelected={topicSelected}
                watch={watch}
                list={sortedOptions}
                required={isRequired}
                errors={errors}
                register={register}
              />
            </FsField>
          );
        }
        if (name.includes("topic")) {
          return (
            <FsField key={id} isHidden={isHidden}>
              <FsTopic
                id={id}
                name={id}
                label={t('Topic')}
                onShowOrderNumberInput={handleShowOrderNumberInput}
                onShowSubTopicInput={handleShowSubTopicInput}
                onTopicSelected={handleTopicSelected}
                watch={watch}
                list={sortedOptions}
                required={isRequired}
                errors={errors}
                register={register}
              />
            </FsField>
          );
        }
        if (name.includes("order_number")) {
          return (
            <FsField key={id} isHidden={showOrderNumberInput}>
            <FsInputField
              id={id}
              name={id}
              type={type}
              errorType={removeSpecialChars(name)}
              label={t("Order Number")}
              required={isRequired}
              setValue={setValue}
              errors={errors}
              watch={watch}
              register={register}
            />
          </FsField>
          );
        }
        if (type === "phone" && typeof currentCountry === "string") {
          return (
            <FsField key={id} isHidden={isHidden}>
              <PhoneNumber
                id={id}
                name={id}
                required={isRequired}
                toolTip={t("We will only call you if there are questions regarding your request.")}
                watch={watch}
                setValue={setValue}
                errors={errors}
                register={register}
                currentCountry={currentCountry}
              />
            </FsField>
          );
        }
        if (type === "email") {
          return (
            <FsField key={id} isHidden={isHidden}>
              <EmailInput id={id} name={id} label={label} required={isRequired} register={register} errors={errors} />
              {props.confirm && (
                <FsConfirmEmail
                  id={`emailConfirmation${id}`}
                  name={`emailConfirmation${id}`}
                  emailFieldName={id}
                  required={isRequired}
                  label={props.confirmationText}
                  getValues={getValues}
                  errors={errors}
                  register={register}
                />
              )}
            </FsField>
          );
        }
        if (type === "select") {
          const defaultValue = props?.default?.length > 0 ? props.default : false;
          return (
            <FsField key={id} isHidden={isHidden}>
              <FsSelect
                id={id}
                name={id}
                label={label}
                defaultValue={defaultValue}
                watch={watch}
                list={props.options}
                required={isRequired}
                errors={errors}
                register={register}
              />
            </FsField>
          );
        }
        if (type === "textarea") {
          return (
            <FsField key={id} isHidden={isHidden}>
              <FsTextarea
                id={id}
                name={id}
                label={label}
                required={isRequired}
                errors={errors}
                register={register}
                watch={watch}
              />
            </FsField>
          );
        }
        if (type === "checkbox") {
          return (
            <FsField key={id} isHidden={isHidden}>
              <FsToggleButton
                id={id}
                name={name}
                label={label}
                renderAfterLabel={props.options[0].label}
                required={isRequired}
                errors={errors}
                register={register}
                market={market}
                language={language}
                country={country}
              />
            </FsField>
          );
        }
        if (type === "richtext") {
          return (
            <FsField key={id} isHidden={isHidden}>
              <FsRichText id={id} dangerouslySetInnerHTML={{ __html: props.section_text }} />
            </FsField>
          );
        }
        if (type === "multiplefiles") {
          return (
            <FsField key={id} isHidden={isHidden}>
              <FsMultipleFileUpload
                id={id}
                name={id}
                label={label}
                fieldIds={fieldIds}
                required={isRequired}
                register={register}
                setValue={setValue}
                errors={errors}
              />
            </FsField>
          );
        }
        // Default Input Field
        return (
          <FsField key={id} isHidden={isHidden}>
            <FsInputField
              id={id}
              name={id}
              type={type}
              errorType={removeSpecialChars(name)}
              label={label}
              required={isRequired}
              setValue={setValue}
              errors={errors}
              watch={watch}
              register={register}
            />
          </FsField>
        );
      })}
    </>
  );
};

export default FsFields;