import React from "react";

import SwipeableDrawer from "@mui/material/SwipeableDrawer";
import InputBase from "@mui/material/InputBase";
import TrapFocus from "@mui/material/Unstable_TrapFocus";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";

import { useAppDispatch, useAppSelector, useInputValue } from "../hooks";
import {
  open as openAction,
  close as closeAction,
} from "../store/slices/uiState";
import { add } from "../store/slices/todo";
import { enterHandler } from "../utils";

export const AddTask: React.FC = () => {
  const open = useAppSelector((state) => state.uiState.addBarOpen);
  const dispatch = useAppDispatch();

  const { value, change, submit } = useInputValue("", (submitValue) =>
    dispatch(add(submitValue))
  );

  const save = () => {
    submit();
    change("");
    dispatch(closeAction());
  };

  return (
    <TrapFocus open={open}>
      <SwipeableDrawer
        sx={{
          "& .MuiDrawer-paperAnchorBottom": {
            overflowY: "visible",
            padding: (theme) => theme.spacing(0, 2, 2, 2),
            maxWidth: "100vh",
            margin: "0 auto",
          },
          position: "relative",
        }}
        anchor="bottom"
        open={open}
        onOpen={() => dispatch(openAction())}
        onClose={() => dispatch(closeAction())}
      >
        <Box
          sx={{
            position: "absolute",
            width: "100%",
            height: (theme) => theme.spacing(2),
            borderRadius: (theme) => theme.spacing(2, 2, 0, 0),
            top: (theme) => "-" + theme.spacing(2),
            left: 0,
            background: (theme) => theme.palette.background.paper,
            backgroundImage:
              "linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15))",
          }}
        />
        <InputBase
          sx={{ "& .MuiInputBase-inputMultiline": { whiteSpace: "pre-wrap" } }}
          fullWidth
          placeholder="New task"
          autoFocus={open}
          value={value}
          onFocus={(e) => {
            e.currentTarget.setSelectionRange(value.length, value.length);
          }}
          onChange={(e) => change(e.currentTarget.value)}
          onKeyDown={enterHandler(save)}
          multiline
        />
        <Box sx={{ paddingTop: (theme) => theme.spacing(1) }}>
          <Button onClick={save} variant="text" sx={{ float: "right" }}>
            Save
          </Button>
        </Box>
      </SwipeableDrawer>
    </TrapFocus>
  );
};