import { useState } from "react";
import React from "reactn";
import { responsiveHeight } from "react-native-responsive-dimensions";
import useMinuit from "react-native-minuit/src/hooks/useMinuit";

import Page from "../layouts/Page";

import { Palette, gutters } from "../styles";

import SectionTextHeader from "../components/SectionTextHeader";
import OptionSelector from "../components/OptionSelector";
import { Input } from "../components/Input";
import Button from "../components/Button";
import DocumentDropZone from "../components/DocumentDropZone";
import FilesPreview from "../components/FilesPreview";

import { documentsRef } from "../config/firebase";
import { background } from "../assets";

const accountTypeList = {
  INDIVIDUAL: "Particulier",
  COMPANY: "Société",
};

const accountTypeColorMap = {
  INDIVIDUAL: {
    primary: Palette.primary,
    secondary: Palette.transparentPrimary,
  },
  COMPANY: {
    primary: Palette.radioactivGreen,
    secondary: Palette.transparentRadioactivGreen,
  },
};

export default ({ containerStyle = {} }) => {
  const { setIsLoading, setTooltip } = useMinuit();

  const documentID = "TEST_DOCUMENT_ID";

  const [billingDetails, setBillingDetails] = useState({
    type: "INDIVIDUAL",
    name: "",
    address: "",
    city: "",
    zipCode: "",
    countryCode: "",
    vatNumber: "",
    companyIdentifier: "",
    files: [],
  });

  const {
    type = "INDIVIDUAL",
    name = "",
    address = "",
    city = "",
    zipCode = "",
    countryCode = "FR",
    vatNumber = "",
    companyIdentifier = "",
    files = [],
  } = billingDetails || {};

  const updateBillingDetails = (key, value) => {
    setBillingDetails({
      ...billingDetails,
      [key]: value,
    });
  };

  const fieldList = [
    {
      key: "name",
      label: type === "COMPANY" ? "Raison sociale" : "Nom",
      value: name,
      inputProps: {
        autoCapitalize: type === "COMPANY" ? "none" : "words",
      },
    },
    {
      key: "address",
      label: "Adresse",
      value: address,
      inputProps: {
        type: "autoCompleteAddress",
      },
    },
    {
      key: "city",
      label: "Ville",
      value: city,
    },
    {
      key: "zipCode",
      label: "Code postal",
      value: zipCode,
      inputProps: {
        isNumeric: true,
      },
    },
    {
      key: "countryCode",
      label: "Pays",
      value: countryCode,
      type: "countryPicker",
    },
    {
      key: "vatNumber",
      label: "Numéro de TVA intracommunautaire (facultatif)",
      value: vatNumber,
      condition: type === "COMPANY",
      required: false,
    },
    {
      key: "companyIdentifier",
      label: "Numéro SIRET",
      value: companyIdentifier,
      condition: type === "COMPANY",
    },
  ].filter(({ condition = true }) => condition);

  const onSubmit = async () => {
    try {
      setIsLoading(true);

      let cleanObject = {};

      fieldList.forEach(({ key, value, label, required = true }) => {
        if (value) {
          cleanObject[key] = value;
        } else if (required) {
          throw new Error(`Le champ ${label.toLowerCase()} est obligatoire`);
        }
      });

      await documentsRef.doc(documentID).set(
        {
          ...cleanObject,
        },
        {
          merge: true,
        }
      );

      setTooltip({
        type: "sucess",
        text: "Document publié!",
      });
    } catch (error) {
      setTooltip({
        type: "error",
        text: error.message,
      });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Page backgroundImg={background.homeBG} headerType="NONE"></Page>
  );
};
