import React, { useState } from "react";
import { useDispatch } from "react-redux";
// material-ui
import { InputBase, IconButton } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import { makeStyles } from "@material-ui/core";
import { addList } from "../../actions";

const useStyles = makeStyles((theme) => ({
	root: {
		padding: "2px 8px",
		display: "flex",
		alignItems: "center",
		justifyContent: "space-between",
		borderRadius: theme.shape.borderRadius,
		width: 275,
		minWidth: 275,
		marginLeft: theme.spacing(2),
		height: "max-content",
		backgroundColor: "#fff",
	},
	input: {
		marginLeft: theme.spacing(1),
		flex: 1,
	},
	iconButton: {
		padding: 10,
	},
}));

export default function CreateList() {
	const dispatch = useDispatch();
	const classes = useStyles();
	const [title, setTitle] = useState("");

	const handleSubmit = (e) => {
		e.preventDefault();
		if (title && title !== "Drafts") {
			dispatch(addList(title));
		}
	};

	const handleTextInput = (e) => {
		setTitle(e.currentTarget.value);
	};

	return (
		<form onSubmit={handleSubmit} className={classes.root}>
			<InputBase
				placeholder="New list…"
				inputProps={{ "aria-label": "add list" }}
				onChange={handleTextInput}
				fullWidth
			/>

			<IconButton
				type="submit"
				className={classes.iconButton}
				aria-label="search"
			>
				<AddIcon />
			</IconButton>
		</form>
	);
}