import { Form } from "react-router-dom";
import { formHasErrors } from "../../lib/form_utils";
import countryList from "react-select-country-list";
import FieldProperties from "./fields/field_properties";
import Field from "./fields/field";
import SelectField from "./fields/select_field";

function getFieldProperties(address: any) {
  const fields: Array<FieldProperties> = [
    {
      id: "street-field",
      type: "text",
      name: "street",
      label: "Calle",
      placeholder: address.street
    },
    {
      id: "number-field",
      type: "number",
      name: "number",
      label: "Número",
      placeholder: address.number
    },
    {
      id: "zip-code-field",
      type: "number",
      name: "zip_code",
      label: "Código postal",
      placeholder: address.zip_code
    },
    {
      id: "city-field",
      type: "text",
      name: "city",
      label: "Ciudad",
      placeholder: address.city
    }
  ];

  for(const field of fields) {
    if(sessionStorage.getItem(field.name)) {
      field.error_message = sessionStorage.getItem(field.name);
    }
  }

  return fields;
}

function getCountrySelectOptions(address: any, country_code: string) {
  if(country_code == address.country)
    return (<option key={ country_code } value={ country_code } selected>{ countryList().getLabel(country_code) }</option>);
  else
    return (<option key={ country_code } value={ country_code }>{ countryList().getLabel(country_code) }</option>);
}

export default function AddressForm({ address }) {
  const select_field_properties: FieldProperties = {
    id: "country-field",
    type: "select",
    name: "city",
    label: "Ciudad"
  }

  const options = countryList().getValues().map(country_code => 
    getCountrySelectOptions(address, country_code)
  );

  const fields = getFieldProperties(address).map(field_properties =>
    <Field properties={field_properties}/>
  );

  return(
    <Form method="post" id="address-form">
      {fields}
      <SelectField properties={select_field_properties} options={options}/>
      <button type="submit" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Enviar</button>
    </Form>
  );
}