import { useFormik } from "formik";
import * as Yup from "yup";
import WithAuth from "../../../components/WithAuth";
import Layout from "../../../components/Layout";
import AppBar from "../../../components/AppBar";
import { Select } from "../../../components/Fields";
import { useEffect, useState } from "react";
import apiOdoo from "../../../helpers/apiOdoo";
import { useAuth } from "../../../helpers/auth";
import { toast } from "react-hot-toast";
import { useRouter } from "next/router";

const initialValues = {
  type: '',
  name: '',
  email: '',
  mobile: '',
  street: '',
  city: '',
  district: '',
  subDistrict: '',
  zip: '',
};

const validationSchema = Yup.object().shape({
  type: Yup.string().required('Harus di-pilih'),
  name: Yup.string().min(3, 'Minimal 3 karakter').required('Harus di-isi'),
  email: Yup.string().email('Format harus seperti johndoe@example.com').required('Harus di-isi'),
  mobile: Yup.string().required('Harus di-isi'),
  street: Yup.string().required('Harus di-isi'),
  zip: Yup.string().required('Harus di-isi'),
  city: Yup.number().required('Harus di-pilih'),
});

const types = [
  { value: 'contact', label: 'Contact Address' },
  { value: 'invoice', label: 'Invoice Address' },
  { value: 'delivery', label: 'Delivery Address' },
  { value: 'other', label: 'Other Address' },
];

export default function CreateAddress() {
  const [auth] = useAuth();
  const router = useRouter();
  
  const onSubmit = async (values) => {
    const parameters = {
      ...values,
      city_id: values.city,
      district_id: values.district,
      sub_district_id: values.subDistrict,
      parent_id: auth.partner_id
    }

    const address = await apiOdoo('POST', '/api/v1/partner/address', parameters);
    if (address?.id) {
      toast.success('Berhasil menambahkan alamat');
      router.back();
    }
  };
  
  const form = useFormik({ initialValues, validationSchema, onSubmit });

  const { 
    values,
    errors,
    touched,
    handleChange,
    handleSubmit,
    setFieldValue,
  } = form;

  const [ cities, setCities ] = useState([]);
  const [ districts, setDistricts ] = useState([]);
  const [ subDistricts, setSubDistricts ] = useState([]);

  useEffect(() => {
    const loadCities = async () => {
      let dataCities = await apiOdoo('GET', '/api/v1/city');
      dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }));
      setCities(dataCities);
    };
    loadCities();
  }, []);

  useEffect(() => {
    setFieldValue('district', '');
    if (values.city) {
      const loadDistricts = async () => {
        let dataDistricts = await apiOdoo('GET', `/api/v1/district?city_id=${values.city}`);
        dataDistricts = dataDistricts.map((district) => ({ value: district.id, label: district.name }));
        setDistricts(dataDistricts);
      };
      loadDistricts();
    }
  }, [ values.city, setFieldValue ]);

  useEffect(() => {
    setFieldValue('subDistrict', '');
    if (values.district) {
      const loadSubDistricts = async () => {
        let dataSubDistricts = await apiOdoo('GET', `/api/v1/sub_district?district_id=${values.district}`);
        dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, label: district.name }));
        setSubDistricts(dataSubDistricts);
      };
      loadSubDistricts();
    }
  }, [ values.district, setFieldValue ]);

  return (
    <WithAuth>
      <Layout>
        <AppBar title="Tambah Alamat" />

        <form onSubmit={handleSubmit} className="p-4 pt-0">
          <label className="form-label mt-4 mb-2">Label Alamat</label>
          <Select 
            name="type"
            options={types}
            setFieldValue={setFieldValue} 
            value={values.type}
          />
          { errors.type && touched.type && (
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.type }</div>
          ) }

          <label className="form-label mt-4 mb-2">Nama</label>
          <input 
            type="text" 
            className="form-input"
            placeholder="John Doe"
            onChange={handleChange} 
            value={values.name} 
            name="name"
          />
          { errors.name && touched.name && (
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.name }</div>
          ) }

          <label className="form-label mt-4 mb-2">Email</label>
          <input 
            type="email" 
            className="form-input"
            placeholder="johndoe@example.com"
            onChange={handleChange} 
            value={values.email} 
            name="email"
          />
          { errors.email && touched.email && (
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.email }</div>
          ) }

          <label className="form-label mt-4 mb-2">No. Handphone</label>
          <input 
            type="tel" 
            className="form-input"
            placeholder="08xxxxxxxx"
            onChange={handleChange} 
            value={values.mobile} 
            name="mobile"
          />
          { errors.mobile && touched.mobile && (
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.mobile }</div>
          ) }

          <label className="form-label mt-4 mb-2">Alamat</label>
          <input 
            type="text" 
            className="form-input"
            placeholder="Jl. Bandengan Utara 85A"
            onChange={handleChange} 
            value={values.street} 
            name="street"
          />
          { errors.street && touched.street && (
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.street }</div>
          ) }

          <label className="form-label mt-4 mb-2">Kode Pos</label>
          <input 
            type="number" 
            className="form-input"
            placeholder="10100"
            onChange={handleChange} 
            value={values.zip} 
            name="zip"
          />
          { errors.zip && touched.zip && (
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.zip }</div>
          ) }

          <label className="form-label mt-4 mb-2">Kota</label>
          <Select 
            name="city"
            options={cities}
            setFieldValue={setFieldValue} 
            value={values.city}
          />
          { errors.city && touched.city && (
            <div className="text-caption-2 text-red_r-11 mt-1">{ errors.city }</div>
          ) }

          <label className="form-label mt-4 mb-2">Kecamatan</label>
          <Select 
            name="district"
            options={districts}
            setFieldValue={setFieldValue} 
            value={values.district}
            disabled={!values.city}
          />

          <label className="form-label mt-4 mb-2">Kelurahan</label>
          <Select 
            name="subDistrict"
            options={subDistricts}
            setFieldValue={setFieldValue} 
            value={values.subDistrict}
            disabled={!values.district}
          />

          <button 
            type="submit" 
            className="btn-yellow mt-6 w-full"
          >
            Simpan
          </button>
        </form>
      </Layout>
    </WithAuth>
  );
}