import React, { useEffect, useState } from "react";
import axios from "axios";

const City = (props) => {
  const route = props.getValue;
  const setUserData = props.setUserData

  const [cityOptions, setCityOptions] = useState([]);
  const [filteredCityOptions, setFilteredCityOptions] = useState([]);
  const [selectedCity, setSelectedCity] = useState('');
  const [buttonsVisible, setButtonsVisible] = useState(false);

  const cityHandler = (e) => {
    setSelectedCity(e.target.value);
  };

  const options = {
    method: 'GET',
    url: 'https://easytravel.zetcraft.ru/v1/GetAllCity',
  };

  useEffect(() => {
    axios.request(options)
      .then(function (response) {
        console.log(response.data);
        setCityOptions(response.data);
        setFilteredCityOptions(response.data);
      })
      .catch(function (error) {
        console.error(error);
      });
  }, []);

  useEffect(() => {
    const filteredOptions = cityOptions.filter(option =>
      option.name.toLowerCase().includes(selectedCity.toLowerCase())
    );
    setFilteredCityOptions(filteredOptions);
  
    setTimeout(() => {
      setButtonsVisible(selectedCity !== '');
    }, 300);
  }, [selectedCity, cityOptions]);

  useEffect(() => {
    const filteredOptions = cityOptions.filter(option =>
      option.name.toLowerCase().includes(selectedCity.toLowerCase())
    );
    setFilteredCityOptions(filteredOptions);
  }, [selectedCity, cityOptions]);

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      justifyContent: 'space-around',
      alignItems: 'center',
      background: 'linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%)',
    }}>
      <div style={{
        position: 'fixed',
        top: 100,
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'column',
        justifyContent: 'center',
        gap: 80,
      }}>
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          width: 304,
        }}>
          <img src='./image 2.png' alt="#" style={{
            width: 282,
            height: 282,
          }} />
        </div>
          <span style={{
            fontWeight: 700,
            fontSize: 30,
            color: '#000'
          }}>Выберите город</span>
        <select onChange={e => cityHandler(e)} value={selectedCity} id="city" name="city" style={{
          height: 40,
          width: 304,
          borderRadius: '20px',
          padding: '5px',
        }}>
          <option value="" style={{
                maxWidth: 200,
            }}>Select a city</option>
          {filteredCityOptions.map(option => (
            <option key={option.id} value={option.name} style={{
                maxWidth: 200,
            }}>{option.name}</option>
          ))}
        </select>
      </div>
      {buttonsVisible ? (
  <div className="button-container" style={{
    display: 'flex',
    flexDirection: 'column',
    position: 'fixed',
    bottom: 50,
    gap: 10,
    }}>
    <button
      onClick={() => {
        route('/second')
        setUserData({selectedCity: selectedCity});
        console.log(selectedCity);
    }}
      className="animated-button"
      style={{
        width: 304,
        height: 54,
        borderRadius: 27,
        border: 'none',
        backgroundColor: '#46A2E3',
        fontFamily: 'Raleway',
        color: '#FFFFFF',
        fontWeight: '97px',
      }}
    >
      Я в этом городе
    </button>
    <button
      onClick={() => window.open('https://www.aviasales.ru/?marker=15468.ydof241309826304&yclid=18373991699987824639&params=TGK1')}
      className="animated-button"
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: 304,
        height: 42,
        borderRadius: 27,
        border: 'none',
        backgroundColor: '#fff',
        fontFamily: 'Raleway',
        color: '#0C78FE',
        fontWeight: '97px',
      }}
    >
      <img
        src="./icon200.png"
        alt="#"
        style={{
          width: 30,
          height: 30,
          marginRight: 10,
        }}
      />
      Купить билет
    </button>
  </div>
) : null}
    </div>
  );
}

export default City;