import React from "react";

const getOptions = (question, isProActive) => {
  return (question.options || []).filter(
    (option) => isProActive || !option.proOnly,
  );
};

const QuestionShell = ({ question, error, children }) => {
  return (
    <div className="arraysubs-setup-wizard__question">
      <label className="arraysubs-setup-wizard__question-label">
        {question.label}
      </label>
      {question.helpText && (
        <p className="arraysubs-setup-wizard__question-help">
          {question.helpText}
        </p>
      )}
      {children}
      {error && (
        <div className="arraysubs-setup-wizard__question-error">{error}</div>
      )}
    </div>
  );
};

const RadioCardField = ({ question, value, onChange, error, isProActive }) => {
  const options = getOptions(question, isProActive);

  return (
    <QuestionShell question={question} error={error}>
      <div className="arraysubs-setup-wizard__radio-cards">
        {options.map((option) => {
          const Icon = option.icon;
          const isSelected = value === option.value;

          return (
            <label
              key={option.value}
              className={`arraysubs-setup-wizard__radio-card ${
                isSelected ? "arraysubs-setup-wizard__radio-card--selected" : ""
              }`}
            >
              <input
                type="radio"
                className="arraysubs-setup-wizard__radio-card-input"
                name={question.key}
                value={option.value}
                checked={isSelected}
                onClick={() => onChange(option.value)}
                onChange={() => onChange(option.value)}
              />
              <div className="arraysubs-setup-wizard__radio-card-top">
                {Icon && (
                  <span className="arraysubs-setup-wizard__radio-card-icon">
                    <Icon size={18} />
                  </span>
                )}
                <span className="arraysubs-setup-wizard__radio-card-label">
                  {option.label}
                </span>
                {option.badge && (
                  <span className="arraysubs-setup-wizard__option-badge">
                    {option.badge}
                  </span>
                )}
              </div>
              {option.description && (
                <span className="arraysubs-setup-wizard__radio-card-desc">
                  {option.description}
                </span>
              )}
            </label>
          );
        })}
      </div>
    </QuestionShell>
  );
};

const RadioField = ({ question, value, onChange, error, isProActive }) => {
  const options = getOptions(question, isProActive);

  return (
    <QuestionShell question={question} error={error}>
      <div className="arraysubs-setup-wizard__choice-list">
        {options.map((option) => (
          <label
            key={option.value}
            className="arraysubs-setup-wizard__choice-item"
          >
            <input
              type="radio"
              className="arraysubs-setup-wizard__choice-input"
              name={question.key}
              value={option.value}
              checked={value === option.value}
              onClick={() => onChange(option.value)}
              onChange={() => onChange(option.value)}
            />
            <span className="arraysubs-setup-wizard__choice-copy">
              <span className="arraysubs-setup-wizard__choice-label-row">
                <span>{option.label}</span>
                {option.badge && (
                  <span className="arraysubs-setup-wizard__option-badge">
                    {option.badge}
                  </span>
                )}
              </span>
              {option.description && (
                <span className="arraysubs-setup-wizard__choice-description">
                  {option.description}
                </span>
              )}
            </span>
          </label>
        ))}
      </div>
    </QuestionShell>
  );
};

const SelectField = ({ question, value, onChange, error, isProActive }) => {
  const options = getOptions(question, isProActive);

  return (
    <QuestionShell question={question} error={error}>
      <select
        className="arraysubs-setup-wizard__select"
        value={value ?? ""}
        onChange={(event) => onChange(event.target.value)}
      >
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </QuestionShell>
  );
};

const NumberField = ({ question, value, onChange, error }) => {
  return (
    <QuestionShell question={question} error={error}>
      <div className="arraysubs-setup-wizard__number-field">
        <input
          type="number"
          className="arraysubs-setup-wizard__input"
          min={question.min}
          max={question.max}
          value={value ?? ""}
          onChange={(event) => onChange(event.target.value)}
        />
        {question.suffix && (
          <span className="arraysubs-setup-wizard__number-field-suffix">
            {question.suffix}
          </span>
        )}
      </div>
    </QuestionShell>
  );
};

const TextField = ({ question, value, onChange, error }) => {
  return (
    <QuestionShell question={question} error={error}>
      <input
        type="text"
        className="arraysubs-setup-wizard__input"
        value={value ?? ""}
        placeholder={question.placeholder || ""}
        onChange={(event) => onChange(event.target.value)}
      />
    </QuestionShell>
  );
};

const CheckboxGroupField = ({
  question,
  value,
  onChange,
  error,
  isProActive,
}) => {
  const options = getOptions(question, isProActive);
  const selectedValues = Array.isArray(value) ? value : [];

  const toggleValue = (optionValue) => {
    if (selectedValues.includes(optionValue)) {
      onChange(selectedValues.filter((item) => item !== optionValue));
      return;
    }

    onChange([...selectedValues, optionValue]);
  };

  return (
    <QuestionShell question={question} error={error}>
      <div className="arraysubs-setup-wizard__choice-list arraysubs-setup-wizard__choice-list--checkboxes">
        {options.map((option) => (
          <label
            key={option.value}
            className="arraysubs-setup-wizard__choice-item"
          >
            <input
              type="checkbox"
              value={option.value}
              checked={selectedValues.includes(option.value)}
              onChange={() => toggleValue(option.value)}
            />
            <span className="arraysubs-setup-wizard__choice-copy">
              <span className="arraysubs-setup-wizard__choice-label-row">
                <span>{option.label}</span>
                {option.badge && (
                  <span className="arraysubs-setup-wizard__option-badge">
                    {option.badge}
                  </span>
                )}
              </span>
              {option.description && (
                <span className="arraysubs-setup-wizard__choice-description">
                  {option.description}
                </span>
              )}
            </span>
          </label>
        ))}
      </div>
    </QuestionShell>
  );
};

const ToggleField = ({ question, value, onChange, error }) => {
  return (
    <QuestionShell question={question} error={error}>
      <label className="arraysubs-setup-wizard__toggle">
        <input
          type="checkbox"
          checked={Boolean(value)}
          onChange={(event) => onChange(event.target.checked)}
        />
        <span className="arraysubs-setup-wizard__toggle-track">
          <span className="arraysubs-setup-wizard__toggle-thumb" />
        </span>
      </label>
    </QuestionShell>
  );
};

const WizardField = ({ question, value, onChange, error, isProActive }) => {
  switch (question.field) {
    case "radio-card":
      return (
        <RadioCardField
          question={question}
          value={value}
          onChange={onChange}
          error={error}
          isProActive={isProActive}
        />
      );

    case "radio":
      return (
        <RadioField
          question={question}
          value={value}
          onChange={onChange}
          error={error}
          isProActive={isProActive}
        />
      );

    case "select":
      return (
        <SelectField
          question={question}
          value={value}
          onChange={onChange}
          error={error}
          isProActive={isProActive}
        />
      );

    case "number":
      return (
        <NumberField
          question={question}
          value={value}
          onChange={onChange}
          error={error}
        />
      );

    case "text":
      return (
        <TextField
          question={question}
          value={value}
          onChange={onChange}
          error={error}
        />
      );

    case "checkbox-group":
      return (
        <CheckboxGroupField
          question={question}
          value={value}
          onChange={onChange}
          error={error}
          isProActive={isProActive}
        />
      );

    case "toggle":
      return (
        <ToggleField
          question={question}
          value={value}
          onChange={onChange}
          error={error}
        />
      );

    default:
      return null;
  }
};

export default WizardField;
