import * as React from "react";
import { Component } from "react";
import styles from "./studys.module.css";
import { Input, Button, Menu, Dropdown, message } from "antd";
import { DownOutlined } from "@ant-design/icons";
import { useSelector } from "../../redux/hooks";
import { useDispatch } from "react-redux";
import { type } from "os";

import {
  changeInputActionCreator,
  addCityActionCreator,
} from "../../redux/citys/cityActions";

export const Studys: React.FC = () => {
  const dispatch = useDispatch();
  const cityList: { name: string }[] = useSelector(
    (state) => state.city.cityLists
  );
  const cityName = useSelector((state) => state.city.cityName);
  const cityInput = useSelector((state) => state.city.cityInput);

  // const onClick = ({ key }) => {
  //   message.info(`Click on item ${key}`);
  // };
  // const menu = (
  //   <Menu onClick={onClick}>
  //     <Menu.Item key="1">1st menu item</Menu.Item>
  //     <Menu.Item key="2">2nd menu item</Menu.Item>
  //     <Menu.Item key="3">3rd menu item</Menu.Item>
  //   </Menu>
  // );
  const addCity = () => {
    dispatch(addCityActionCreator(cityInput));
  };
  const changeInput = (e) => {
    // console.log(e.target.value)

    dispatch(changeInputActionCreator(e.target.value));
  };
  return (
    <>
      {/* 做一个与header.tsx类似的页面 */}
      <h1>练习页面</h1>
      <div>
        <div>
          添加你想去的城市：
          <input
            placeholder="Basic usage"
            onChange={changeInput}
            style={{ width: 200 }}
            value={cityInput}
          />
          <Button type="primary" onClick={addCity}>
            添加
          </Button>
        </div>
        <h1>我最喜欢的城市：{cityName}</h1>
        <h1>
          我想去的城市:
          {cityList.map((item, index) => {
            return (
              <>
                <span>{item.name},</span>
              </>
            );
          })}
        </h1>
      </div>
    </>
  );
};