/** @jsx jsx */
import { jsx } from '@emotion/core';
import styled from '@emotion/styled';
import { gray300, gray800, blue500, gray600, gray200, gray100 } from '../../styles/colors_v2';
import { useState, useEffect, useRef, useCallback } from 'react';
import { SaveableCommand } from '../../hooks/useCommandEditor';
import Option from './Option';
import { CommandCategory } from '../../types';
import { MajorButton } from '../../styles/elements';

const SaveForm = styled.div`
  padding: 12px;
  overflow: scroll;
  ::-webkit-scrollbar {
    display: none;
  }
`;

const Label = styled.h4`
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
`;

const Input = styled.input`
  font-family: inherit;
  background-color: ${gray300};
  width: 100%;
  border-radius: 2px;
  padding: 8px;
  font-size: 14px;
  color: ${gray800};
  border: 2px solid transparent;
  margin-bottom: 16px;
  &:focus, &:active {
    outline: none;
    border: 2px solid ${blue500};
  }
`;

const Textarea = styled.textarea`
  font-family: inherit;
  background-color: ${gray300};
  width: 100%;
  border-radius: 2px;
  padding: 8px;
  font-size: 14px;
  line-height: 18px;
  color: ${gray800};
  resize: none;
  border: 2px solid transparent;
  margin-bottom: 16px;
  &:focus, &:active {
    outline: none;
    border: 2px solid ${blue500};
  }
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 20px);
`;

const StickyFooter = styled.footer`
  width: 296px;
  padding: 4px 12px 12px 12px;
  background-color: ${gray100};
`;

const SaveButton = styled(MajorButton)<{ disabled?: boolean }>`
  width: 100%;
  padding: 10px 20px;
  ${({ disabled }) => disabled && `
    background-color: ${gray200};
    &:hover {
      cursor: default;
      background-color: ${gray200};
    }
  `}
`;

const Message = styled.p`
  padding: 0 8px;
  text-align: center;
  color: ${gray800};
`;


const Disclaimer = styled.p`
  color: ${gray600};
  font-size: 13px;
`;

export default (
  { onSubmit, focusedCommand, message, hasChanges: inputHasChanges }:
  { focusedCommand: SaveableCommand, onSubmit: (name: string, description: string, category: CommandCategory) => void, message: string | null, hasChanges: boolean }
) => {
  const [name, setName] = useState(focusedCommand.name);
  const [description, setDescription] = useState(focusedCommand.description);
  const [category, setCategory] = useState(focusedCommand.category);

  const hasChanges = (
    inputHasChanges ||
    name !== focusedCommand.name ||
    description !== focusedCommand.description ||
    category !== focusedCommand.category
  );

  const lastFocusedCommand = useRef(focusedCommand);

  useEffect(() => {
    if (focusedCommand !== lastFocusedCommand.current) {
      setName(focusedCommand.name);
      setDescription(focusedCommand.description);
      setCategory(focusedCommand.category);
      lastFocusedCommand.current = focusedCommand;
    }
  }, [focusedCommand, setName, setDescription, setCategory]);

  const onClickSave = useCallback(
    () => {
      onSubmit(name, description, category);
    },
    [name, description, category, onSubmit]
  );

  return (
    <Container>
      <SaveForm>
        <Disclaimer>Your saved code may appear in the 'Community' section of the library.</Disclaimer>
        <Label>Name</Label>
        <Input value={name} onChange={(e) => setName(e.target.value)} autoFocus={focusedCommand.name.startsWith('Copy of')} />

        <Label>Description</Label>
        <Textarea value={description} maxLength={140} rows={5} placeholder="Briefly describe what your code does!" onChange={(e) => setDescription(e.target.value)} />

        <Label>Category</Label>
        <div>
          <Option onClick={() => setCategory(CommandCategory.Edit)} active={category === CommandCategory.Edit}>Edit</Option>
          <Option onClick={() => setCategory(CommandCategory.Effect)} active={category === CommandCategory.Effect}>Effect</Option>
          <Option onClick={() => setCategory(CommandCategory.Generator)} active={category === CommandCategory.Generator}>Generator</Option>
        </div>
      </SaveForm>
      <StickyFooter>
        {message && <Message>{message}</Message>}
        <SaveButton onClick={onClickSave} disabled={!hasChanges}>{hasChanges ? 'Save' : 'No Changes'}</SaveButton>
      </StickyFooter>
    </Container>
  );
}