/* eslint-disable @next/next/no-img-element */
import ProfilePictureUpload from '@/components/Form/ProfilePictureUpload';
import PreLoginLayout from '@/components/Layouts/PreLoginLayout';
import { useCreateprofileMutation } from '@/lib/redux/services/auth.api';
import style from '@/styles/modules/prelogin/prelogin-layout.module.scss';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import { Col, Row, Spinner } from 'react-bootstrap';
import { Country, State, City } from 'country-state-city';
import toast from 'react-hot-toast';

export default function AdminCreateProfile() {
  const [countries, setCountries] = useState<any[]>([]);
  const [states, setStates] = useState<any[]>([]);
  const [cities, setCities] = useState<any[]>([]);

  const [country, setCountry] = useState('');
  const [state, setState] = useState('');
  const [city, setCity] = useState('');

  const [image, setImage] = useState<File | null>(null);
  const [name, setName] = useState('');
  const [number, setNumber] = useState('');
  const router = useRouter();
  const [createprofie, { isLoading }] = useCreateprofileMutation();
  const { data: session }: any = useSession();
  const token = session?.user?.token;

  useEffect(() => {
    setCountries(Country.getAllCountries());
  }, []);

  const handleCountryChange = (e: any) => {
    const countryCode = e.target.value;
    setCountry(countryCode);
    setStates(State.getStatesOfCountry(countryCode));
    setCities([]);
    setState('');
    setCity('');
  };

  const handleStateChange = (e: any) => {
    const stateCode = e.target.value;
    setState(stateCode);
    setCities(City.getCitiesOfState(country, stateCode));
    setCity('');
  };

  const handleUserProfileCreation = async (e: any) => {
    e.preventDefault();
    const feilds = {
      name,
      phonenumber: number,
      location: country,
      state,
      city
    };

    const isEmptyField = Object.values(feilds).some((value) => !value);
    if (isEmptyField) return toast.error('All fields are required');

    const formData = new FormData();
    Object.entries(feilds).forEach(([key, value]) =>
      formData.append(key, value as string)
    );
    if (image) formData.append('image', image);

    try {
      const response: any = await createprofie({ body: formData, token }).unwrap();
      if (response?.status) {
        toast.success('Profile Info registered successfully');
        router.push('/admin/admin-campaign');
      } else {
        toast.error('Something went wrong');
      }
    } catch (err) {
      console.error(err);
      toast.error('Invalid token');
    }
  };

  return (
    <PreLoginLayout>
      <form className="prelogin form-wrapper text-center">
        <h1 className={style.form_title}>Create Profile</h1>
        <p className={style.form_para}>Please fill the form to create profile</p>

        {/* Profile Picture */}
        <ProfilePictureUpload
          id="upAvatar"
          name="upAvatar"
          label=""
          onChange={setImage}
          image={image}
        />

        {/* Name */}
        <Row>
          <Col lg="12">
            <div className="form-group">
              <div className="icon-field">
                <label>Full Name</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="John Smith"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                />
                <img src={'/images/Combined-Shape.svg'} className="icon" alt="" />
              </div>
            </div>
          </Col>
        </Row>

        {/* Phone Number */}
        <Row>
          <Col lg="12">
            <div className="form-group">
              <div className="icon-field">
                <label>Phone Number</label>
                <input
                  type="number"
                  className="form-control"
                  placeholder="+23 1234 12345"
                  value={number}
                  onChange={(e) => setNumber(e.target.value)}
                />
                <img src={'/images/mobile.png'} className="icon" alt="" />
              </div>
            </div>
          </Col>
        </Row>

        {/* Country */}
        <div className="form-group">
          <div className="icon-field">
            <label>Country</label>
            <select
              className="form-control"
              value={country}
              onChange={handleCountryChange}
            >
              <option value="">Select Country</option>
              {countries.map((c) => (
                <option key={c.isoCode} value={c.isoCode}>
                  {c.name}
                </option>
              ))}
            </select>
          </div>
        </div>

        <Row>
          {/* State */}
          <Col lg="6">
            <div className="form-group">
              <div className="icon-field">
                <label>State</label>
                <select
                  className="form-control"
                  value={state}
                  onChange={handleStateChange}
                >
                  <option value="">Select State</option>
                  {states.map((s) => (
                    <option key={s.isoCode} value={s.isoCode}>
                      {s.name}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          </Col>

          {/* City */}
          <Col lg="6">
            <div className="form-group">
              <div className="icon-field">
                <label>City</label>
                <select
                  className="form-control"
                  value={city}
                  onChange={(e) => setCity(e.target.value)}
                >
                  <option value="">Select City</option>
                  {cities.map((ci) => (
                    <option key={ci.name} value={ci.name}>
                      {ci.name}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          </Col>
        </Row>

        {/* Submit */}
        <div className="form-group mt-4">
          <button
            type="button"
            className="btn btn-primary"
            onClick={handleUserProfileCreation}
          >
            {isLoading ? <Spinner size="sm" /> : 'Next'}
          </button>
        </div>
      </form>
    </PreLoginLayout>
  );
}