import React, { Fragment } from "react";
import { KeyboardTypeOptions } from "react-native";
import { AtomCaption } from "native/atoms/Typography/Caption";
import { AtomBody } from "native/atoms/Typography/Body";
import { IInputType } from "native/atoms/Input/InputTypes";
import { IInputPropsNative } from "interfaces";
import { AtomInputText } from "native/atoms/Input/InputText";
import { AtomInputPhone } from "native/atoms/Input/InputPhone";
import { IInputAlign } from "native/atoms/Input/InputPhone/InputPhoneTypes";
import { AtomInputPassword } from "native/atoms/Input/InputPassword";
import { AtomInputNumber } from "native/atoms/Input/InputNumber";
import { AtomInputEmail } from "native/atoms/Input/InputEmail";
import { AtomInputDate } from "native/atoms/Input/InputDate";

export interface IMoleculeInputProps extends IInputPropsNative {
  label?: string;
  helperText?: string;
  type?: IInputType;
  value?: string;
  phone?: string;
  country?: string;
  alignPhone?: IInputAlign;
  importantCountries?: string[];
  labelCountryPicker?: string;
  placeholderCountryP?: string;
  minYear?: string;
  maxYear?: string;
  keyboardType?: KeyboardTypeOptions;
}

export const MoleculeInput = ({
  label = "",
  helperText = "",
  value,
  alignPhone = "default",
  importantCountries,
  labelCountryPicker,
  placeholderCountryP,
  name = "",
  regex = "",
  readOnly = false,
  required,
  placeholder = "",
  disabled = false,
  type = "Text",
  phone,
  country,
  styles = {},
  minYear,
  maxYear,
  keyboardType = "default",
  onChange = () => {},
  errorCallback,
}: IMoleculeInputProps) => {
  let InputLocal;
  switch (type) {
    case "Text":
      InputLocal = (
        <AtomInputText
          name={name}
          regex={regex}
          value={value}
          readOnly={readOnly}
          required={required}
          placeholder={placeholder}
          disabled={disabled}
          styles={styles}
          keyboardType={keyboardType}
          onChange={(e) => {
            onChange(e);
          }}
          errorCallback={errorCallback}
        />
      );
      break;
    case "Phone":
      InputLocal = (
        <AtomInputPhone
          name={name}
          regex={regex}
          phone={phone}
          country={country}
          readOnly={readOnly}
          required={required}
          placeholder={placeholder}
          disabled={disabled}
          onChange={(e) => {
            onChange(e);
          }}
          errorCallback={errorCallback}
          align={alignPhone}
          importantCountries={importantCountries}
          labelCountryPicker={labelCountryPicker}
          labelPhone={label}
          placeholderCountryP={placeholderCountryP}
          helperText={helperText}
          styles={styles}
        />
      );
      break;
    case "Password":
      InputLocal = (
        <AtomInputPassword
          name={name}
          regex={regex}
          value={value}
          readOnly={readOnly}
          required={required}
          placeholder={placeholder}
          disabled={disabled}
          styles={styles}
          onChange={(e) => {
            onChange(e);
          }}
          errorCallback={errorCallback}
        />
      );
      break;
    case "Number":
      InputLocal = (
        <AtomInputNumber
          name={name}
          regex={regex}
          value={value}
          readOnly={readOnly}
          required={required}
          placeholder={placeholder}
          disabled={disabled}
          styles={styles}
          onChange={(e) => {
            onChange(e);
          }}
          errorCallback={errorCallback}
        />
      );
      break;
    case "Email":
      InputLocal = (
        <AtomInputEmail
          name={name}
          regex={regex}
          value={value}
          readOnly={readOnly}
          required={required}
          placeholder={placeholder}
          disabled={disabled}
          styles={styles}
          onChange={(e) => {
            onChange(e);
          }}
          errorCallback={errorCallback}
        />
      );
      break;
    case "Date":
      InputLocal = (
        <AtomInputDate
          date={value}
          minYear={minYear}
          maxYear={maxYear}
          disabled={disabled}
          readOnly={readOnly}
          required={required}
          onChange={(e) => {
            onChange(e);
          }}
          styles={styles}
        />
      );
      break;
  }
  return (
    <Fragment>
      {label !== "" && type !== "Phone" && (
        <AtomBody
          size="large"
          text={label}
          align="left"
          color={"neutral700"}
          weight="regular"
        />
      )}
      {InputLocal}
      {helperText !== "" && readOnly == false && type !== "Phone" && (
        <AtomCaption
          size="medium"
          weight="regular"
          text={helperText}
          color={"neutral600"}
          styles={{ "margin-top": "4px" }}
        />
      )}
    </Fragment>
  );
};
