import React, { useState, useEffect } from 'react';
import { InputText } from 'primereact/inputtext';
import { InputTextarea } from 'primereact/inputtextarea';
import { InputMask } from 'primereact/inputmask';
import { InputNumber } from 'primereact/inputnumber';
import { AutoComplete } from 'primereact/autocomplete';
import { Calendar } from 'primereact/calendar';
import { Chips } from 'primereact/chips';
import { Dropdown } from 'primereact/dropdown';
import { MultiSelect } from 'primereact/multiselect';
import { Password } from 'primereact/password';
import { CountryService } from '../service/CountryService';

const InvalidStateDemo = () => {
  const [countries, setCountries] = useState([]);
  const [filteredCountries, setFilteredCountries] = useState(null);
  const [value1, setValue1] = useState('');
  const [value2, setValue2] = useState('');
  const [value3, setValue3] = useState(null);
  const [value4, setValue4] = useState('');
  const [value5, setValue5] = useState('');
  const [value6, setValue6] = useState('');
  const [value7, setValue7] = useState('');
  const [value8, setValue8] = useState([]);
  const [value9, setValue9] = useState(null);
  const [value10, setValue10] = useState('');

  const cities = [
    { name: 'New York', code: 'NY' },
    { name: 'Rome', code: 'RM' },
    { name: 'London', code: 'LDN' },
    { name: 'Istanbul', code: 'IST' },
    { name: 'Paris', code: 'PRS' },
  ];

  useEffect(() => {
    const countryService = new CountryService();
    countryService.getCountries().then((countries) => {
      setCountries(countries);
    });
  }, []);

  const searchCountry = (event) => {
    // in a real application, make a request to a remote url with the query and
    // return filtered results, for demo we filter at client side
    const filtered = [];
    const query = event.query;
    for (let i = 0; i < countries.length; i++) {
      const country = countries[i];
      if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) {
        filtered.push(country);
      }
    }
    setFilteredCountries(filtered);
  };

  return (
    <div className="grid p-fluid">
      <div className="col">
        <div className="card">
          <h5>Invalid State</h5>
          <div className="grid">
            <div className="col-12 md:col-6">
              <div className="field">
                <label htmlFor="inputtext">InputText</label>
                <InputText
                  type="text"
                  id="inputtext"
                  value={value1}
                  onChange={(e) => setValue1(e.target.value)}
                  className="p-invalid"
                />
              </div>
              <div className="field">
                <label htmlFor="autocomplete">AutoComplete</label>
                <AutoComplete
                  id="autocomplete"
                  value={value5}
                  onChange={(e) => setValue5(e.value)}
                  suggestions={filteredCountries}
                  completeMethod={searchCountry}
                  field="name"
                  className="p-invalid"
                />
              </div>
              <div className="field">
                <label htmlFor="calendar">Calendar</label>
                <Calendar
                  inputId="calendar"
                  value={value6}
                  onChange={(e) => setValue6(e.value)}
                  className="p-invalid"
                  showIcon
                />
              </div>
              <div className="field">
                <label htmlFor="chips">Chips</label>
                <Chips
                  inputId="chips"
                  value={value8}
                  onChange={(e) => setValue8(e.value)}
                  className="p-invalid"
                />
              </div>
              <div className="field">
                <label htmlFor="password">Password</label>
                <Password
                  inputId="password"
                  value={value10}
                  onChange={(e) => setValue10(e.target.value)}
                  className="p-invalid"
                />
              </div>
            </div>

            <div className="col-12 md:col-6">
              <div className="field">
                <label htmlFor="inputmask">InputMask</label>
                <InputMask
                  id="inputmask"
                  mask="99/99/9999"
                  value={value2}
                  onChange={(e) => setValue2(e.value)}
                  className="p-invalid"
                />
              </div>
              <div className="field">
                <label htmlFor="inputnumber">InputNumber</label>
                <InputNumber
                  id="inputnumber"
                  value={value3}
                  onValueChange={(e) => setValue3(e.target.value)}
                  className="p-invalid"
                />
              </div>
              <div className="field">
                <label htmlFor="dropdown">Dropdown</label>
                <Dropdown
                  id="dropdown"
                  options={cities}
                  value={value7}
                  onChange={(e) => setValue7(e.value)}
                  optionLabel="name"
                  className="p-invalid"
                />
              </div>
              <div className="field">
                <label htmlFor="multiselect">MultiSelect</label>
                <MultiSelect
                  id="multiselect"
                  options={cities}
                  value={value9}
                  onChange={(e) => setValue9(e.value)}
                  optionLabel="name"
                  className="p-invalid"
                />
              </div>
              <div className="field">
                <label htmlFor="textarea">Textarea</label>
                <InputTextarea
                  id="textarea"
                  rows="3"
                  cols="30"
                  value={value4}
                  onChange={(e) => setValue4(e.target.value)}
                  className="p-invalid"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const comparisonFn = function (prevProps, nextProps) {
  return prevProps.location.pathname === nextProps.location.pathname;
};

export default React.memo(InvalidStateDemo, comparisonFn);