import React, { useState } from "react";
import { Text, Box, Input, Button, Label, IconButton } from "theme-ui";

import Modal from "./Modal";

function Nickname({ nickname, allowChanging, onChange }) {
  const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
  function openModal() {
    setIsChangeModalOpen(true);
  }
  function closeModal() {
    setIsChangeModalOpen(false);
  }

  const [changedNickname, setChangedNickname] = useState(nickname);
  function handleChangeSubmit(event) {
    event.preventDefault();
    if (allowChanging) {
      onChange(changedNickname);
      closeModal();
    }
  }

  function handleChange(event) {
    setChangedNickname(event.target.value);
  }

  return (
    <>
      <Text
        my={1}
        variant="caption"
        sx={{
          fontSize: 10,
          cursor: allowChanging ? "pointer" : "default",
          ":hover": allowChanging && {
            color: "primary",
          },
          ":active": allowChanging && {
            color: "secondary",
          },
          position: "relative",
        }}
        onClick={() => allowChanging && openModal()}
      >
        {nickname}
        {allowChanging && (
          <IconButton
            sx={{
              width: "10px",
              height: "10px",
              padding: 0,
              margin: "2px",
              position: "absolute",
              bottom: "-2px",
            }}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="10"
              viewBox="0 0 24 24"
              width="10"
              fill="currentcolor"
            >
              <path d="M0 0h24v24H0V0z" fill="none" />
              <path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
            </svg>
          </IconButton>
        )}
      </Text>
      <Modal isOpen={isChangeModalOpen} onRequestClose={closeModal}>
        <Box as="form" onSubmit={handleChangeSubmit}>
          <Label htmlFor="nicknameChange">Change your nickname</Label>
          <Input
            id="nicknameChange"
            value={changedNickname}
            onChange={handleChange}
            mt={1}
            mb={3}
          />
          <Button disabled={!changedNickname}>Change</Button>
        </Box>
      </Modal>
    </>
  );
}

Nickname.defaultProps = {
  allowChanging: false,
  onChange: () => {},
};

export default Nickname;