import * as React from 'react';
import styled from 'styled-components';
import AutosizeTextArea from 'react-textarea-autosize';

import { Consumer } from '../Value';
import ImageUploader from './ImageUploader';
import ExportFile from './ExportFile';
import ImportFile from './ImportFile';
import EditorToggle from './EditorToggle';
import type { Schema } from '../Email';

type Props = {
  schema: Schema
};

const editorWidth = 300;
const editorActionsHeight = 48;

const Editor = styled.div`
  position: fixed;
  box-sizing: border-box;
  left: ${props => (props.visible ? 0 : `-${editorWidth}px`)};
  top: 0;
  bottom: ${editorActionsHeight}px;
  width: ${editorWidth}px;
  padding: 1em 1em ${editorActionsHeight}px 1em;
  background-color: rgba(250, 250, 250, 0.9);
  overflow-y: scroll;
  border-right: 1px solid rgb(235, 235, 235);
`;

const Label = styled.label`
  display: block;
  font-family: Monaco;
  font-size: 14px;
  margin-bottom: 0.5em;
`;

const Input = styled.input`
  font-size: 16px;
  padding: 0.5em;
`;

const TextArea = styled(AutosizeTextArea)`
  font-size: 14px;
  padding: 0.5em;
  resize: none;
`;

const EditorActions = styled.div`
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: ${props => (props.visible ? 0 : `-${editorWidth}px`)};
  width: ${editorWidth}px;
  height: ${editorActionsHeight}px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
  background-color: rgba(230, 230, 230, 0.98);
`;

export function ValuesEditor(props: Props) {
  return (
    <Consumer>
      {({ values, setValue }) => (
        <>
          <Editor visible={props.visible}>
            {Object.keys(props.schema).map(key => (
              <div
                key={key}
                style={{
                  marginBottom: '1.5em',
                  flex: 1,
                  display: 'flex',
                  flexDirection: 'column'
                }}
              >
                <Label>{props.schema[key].name}</Label>

                {props.schema[key].type === 'image' && (
                  <ImageUploader
                    value={values.get(key)}
                    maxWidth={props.schema[key].dimensions?.maxWidth || 1000}
                    maxHeight={props.schema[key].dimensions?.maxHeight || 1000}
                    onUpload={url => {
                      setValue(key, url);
                    }}
                  />
                )}

                {props.schema[key].type === 'string' && (
                  <Input
                    type="text"
                    value={values.get(key)}
                    onChange={event => {
                      setValue(key, event.currentTarget.value);
                    }}
                  />
                )}

                {props.schema[key].type === 'text' && (
                  <TextArea
                    rows={3}
                    value={values.get(key)}
                    onChange={event => {
                      setValue(key, event.currentTarget.value);
                    }}
                  />
                )}
              </div>
            ))}

            <EditorActions visible={props.visible}>
              <ExportFile />
              <ImportFile />
            </EditorActions>
          </Editor>

          <EditorToggle
            editorWidth={editorWidth}
            visible={props.visible}
            onClick={props.onToggle}
          >
            {props.visible ? '❮' : '❯'}
          </EditorToggle>
        </>
      )}
    </Consumer>
  );
}

ValuesEditor.displayName = 'ValuesEditor';

export default ValuesEditor;