/** @jsx jsx */
import { jsx } from '@emotion/core';
import styled from '@emotion/styled';
import { blue500 } from '../styles/colors_v2';
import { useCallback, useState } from 'react';

const Title = styled.h4<{ onClick?: () => void, italicize: boolean }>`
  font-size: 13px;
  display: flex;
  align-items: center;
  margin-left: 8px;
  font-style: ${({ italicize }) => italicize ? 'italic' : 'default'};
  ${({ onClick }) => onClick && `
    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  `}
`;

const TitleInput = styled.input`
  font-family: inherit;
  font-size: 13px;
  padding: 1px 6px;
  margin: 2px 4px;
  border: 1px solid ${blue500};
  border-radius: 1px;
  outline: none;
  background-color: white;
`;

export default ({ value, onChange, italicize }: { value: string, onChange?: (value: string) => void, italicize?: boolean }) => {
  const [editingTitle, setEditingTitle] = useState(false);
  const [editableTitle, setEditableTitle] = useState(value);
  const handleClickTitle = useCallback(() => setEditingTitle(true), [setEditingTitle]);

  const submitTitle = useCallback(
    () => {
      setEditingTitle(false);
      onChange && onChange(editableTitle);
    },
    [setEditingTitle, editableTitle, onChange]
  );
  const handleChangeTitle = useCallback(
    (e) => {
      setEditableTitle(e.currentTarget.value);
    },
    [setEditableTitle]
  );
  const handleKeyDown = useCallback(
    (e) => {
      if (e.which === 13) { // Return key
        submitTitle()
      }
    },
    [submitTitle]
  );

  return onChange && editingTitle
    ? <TitleInput value={editableTitle} onChange={handleChangeTitle} onKeyDown={handleKeyDown} autoFocus onBlur={submitTitle} />
    : <Title italicize={!!italicize} onClick={onChange ? handleClickTitle : undefined}>{value}</Title>;
}