import { h, Component } from 'preact';
import MeasurementUnit from './MeasurmentUnits';
import Dropdown from './Dropdown';

export default class FilterForm extends Component<any, any> {
  private readonly fetchURL = '/json/real-estate';

  constructor(props) {
    super(props);

    const {
      filters,
      filters: { area, city },
      areas,
    } = props;

    const preselectedCity = Boolean(city);
    const preselectedArea = Boolean(area && area.length === 1);

    this.state = {
      filters,
      areas,
      preselectedCity,
      preselectedArea,
    };
  }

  async componentDidMount() {
    const { city } = this.state.filters;
    if (city) {
      await this.fetchCityAreas('city', city);
    }
  }

  filterProperties = async event => {
    event.preventDefault();
    this.props.toggleLoading();
    const { filters } = this.state;
    const response = await fetch(this.fetchURL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(filters),
    });
    const data: {
      propertiesList: IRealEstateTeaser[];
      propertiesCount: number;
    } = await response.json();

    const { city, area } = filters;
    this.props.onFilterProperties(data, { city, area });
  };

  handleChange = (name: string, value: string): void => {
    this.setState({ filters: { ...this.state.filters, [name]: value } });
  };

  handleRangeChange = (name: string) => (event: any): void => {
    const filter = this.state.filters[name] || {};
    filter[event.target.name] = event.target.value || null;
    this.setState({ filters: { ...this.state.filters, [name]: filter } });
  };

  fetchCityAreas = async (name = 'city', cityCandidate: string): Promise<void> => {
    if (this.state.filters.city !== cityCandidate) {
      const city = cityCandidate;
      const response = await fetch(`${this.fetchURL}/${city}`);
      const areas = await response.json();
      const area = [];
      const filters = { ...this.state.filters, city, area };

      this.setState({ areas, filters });
    } else if (!this.state.preselectedCity) {
      const [area, areas] = Array(2).fill([]);
      // Remove city from filters
      const { city, ...newFilters } = this.state.filters;
      const filters = { ...newFilters, area };
      this.setState({ areas, filters });
    }
  };

  render({ cities, types }, { filters, areas, preselectedArea }) {
    return (
      <div className="c-realestate-filters u-mam">
        <form className="c-realestate-filters__form" onSubmit={this.filterProperties}>
          <Dropdown
            options={cities}
            name="city"
            label="Sted/By"
            option={filters.city || null}
            onInput={this.fetchCityAreas}
          />
          <Dropdown
            options={(preselectedArea && []) || areas}
            name="area"
            label="Område"
            option={(preselectedArea && filters.area[0]) || null}
            multiselect
            onInput={this.handleChange}
          />
          <Dropdown
            options={types}
            name="type"
            label="Type"
            multiselect
            onInput={this.handleChange}
          />

          <Dropdown name="size" label="Størrelse" value={filters.size}>
            <RangeValues
              handleChange={this.handleRangeChange('size')}
              unit="sqaure-meter"
              value={filters.size}
            />
          </Dropdown>

          <Dropdown name="price" label="Pris" value={filters.price}>
            <RangeValues
              handleChange={this.handleRangeChange('price')}
              unit="kr"
              value={filters.price}
            />
          </Dropdown>
          <button className="c-realestate-filters__submit-btn" type="submit">
            Søk
          </button>
        </form>
      </div>
    );
  }
}

function RangeValues({ handleChange, unit, value }) {
  const unitValue = unit === 'sqaure-meter' ? <MeasurementUnit name={unit} /> : unit;
  return (
    <div className="c-realestate-filters__range">
      <div className="c-realestate-filters__range__item">
        <label>Fra {unitValue}</label>
        <NumberInput handleChange={handleChange} name="min" value={value && value.min} />
      </div>
      <div className="c-realestate-filters__range__item">
        <label>Til {unitValue}</label>
        <NumberInput handleChange={handleChange} name="max" value={value && value.max} />
      </div>
    </div>
  );
}

function NumberInput({ handleChange, value, name }) {
  return (
    <input
      type="number"
      onKeyUp={handleChange}
      onMouseUp={handleChange}
      value={value}
      name={name}
    />
  );
}