import {addTodo, removeTodo} from "@/store/action/todo";
import PropTypes from 'prop-types'
import React, {FormEvent, useRef} from "react";
import {connect} from "react-redux";
import Header from "./Header";

function Home(props: any) {

  const {todo, add, remove} = props
  const inputRef = useRef<HTMLInputElement>(null);

  function addOne(e: FormEvent) {
    e.preventDefault()
    let text = inputRef.current!.value
    if (text) {
      inputRef.current!.value = ""
      add(text)
    }
  }

  return (
    <div>
      <Header></Header>
      <div>
        <div className="bg-white min-h-100vh">
          <div className="container clearfix mx-auto  h-500px">
            <form onSubmit={(e) => addOne(e)}>
              <input ref={inputRef} type="text"/>
              <button type="submit">添加</button>
            </form>
            {todo
              .map((v: ITodo) => {
                return <p onClick={() => remove(v.id)} key={v.id}>{v.text}{v.id}</p>;
              })}
          </div>
        </div>
        <div className="min-h-100vh"></div>
        <div className="bg-white min-h-100vh">
          <div className="container clearfix mx-auto">
            {[...Array(100)]
              .map((v, i) => i)
              .map(v => {
                return <p key={v}>v</p>
              })}
          </div>
        </div>
      </div>
    </div>
  )
}

Home.propTypes = {
  todo: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired).isRequired,
  add: PropTypes.func.isRequired,
  remove: PropTypes.func.isRequired
}

const mapStateToProps = (state: any) => {
  console.log(state)
  return {
    todo: state.todo
  }
}

const mapDispatchToProps = (dispatch: any) => ({
  add: (text: string) => dispatch(addTodo(text)),
  remove: (id: string | number) => dispatch(removeTodo(id)),
})

export default connect(mapStateToProps, mapDispatchToProps)(Home);