import React, { Component } from 'react';
import { Input, Select, Checkbox, InputNumber } from 'antd';
import {
  ColorEditor,
  DateEditor,
  DateRangeEditor,
  TimeRangeEditor,
  TimeRangesEditor,
  TagsEditor,
  SuggestEditor,
} from 'olymp-ui';
import GeocodeEditor from 'olymp-google/edits/geocode';
import { SlateWriter } from 'olymp-slate';
import cn from 'classnames';
import { EditImage } from 'olymp-cloudinary';
import { FormListEdit, DetailEdit } from '../../../edits';

const states = {
  PUBLISHED: 'Öffentlich',
  DRAFT: 'Entwurf',
  REMOVED: 'Papierkorb',
};

class SlateEditor extends Component {
  // muss Klasse bleiben, da sonst:
  // Stateless function components cannot be given refs. Attempts to access this ref will fail.
  render() {
    const { onChange, value, children, binding, label } = this.props;

    return (
      <SlateWriter
        onChange={onChange}
        value={value}
        binding={binding}
        placeholder={label || 'Hier Text eingeben!'}
        style={{ borderBottom: '1px solid #e9e9e9', flex: 1 }}
      >
        {children}
      </SlateWriter>
    );
  }
}

export default ({
  className,
  editorClassName,
  style,
  editorStyle,
  field,
  label,
  key,
  form,
}) => {
  const { idField, start, suggest } = field['@'];
  const { name } = field;
  const type = field.type.kind === 'NON_NULL' ? field.type.ofType : field.type;

  const editProps = {
    placeholder: label || null,
    style: { ...editorStyle, ...style },
    className: cn(editorClassName, className),
    key,
  };

  if (idField && idField.type) {
    if (idField.type.kind === 'LIST' && idField.type.ofType) {
      return (
        <DetailEdit {...editProps} tags typeName={idField.type.ofType.name} />
      );
    }
    return <DetailEdit {...editProps} typeName={idField.type.name} />;
  }
  if (type.kind === 'LIST') {
    if (type.ofType.name === 'TimeRange') {
      return <TimeRangesEditor {...editProps} />;
    }
    if (type.ofType.name === 'String') {
      if (name === 'tags') {
        return <TagsEditor {...editProps} searchPlaceholder="Suche ..." />;
      }
      return (
        <Select {...editProps} mode="tags" searchPlaceholder="Suche ..." />
      );
    }
    if (type.ofType.name.indexOf('Nested') === 0) {
      return (
        <FormListEdit {...editProps} typeName={type.ofType.name} type={type} />
      );
    }
    return null;
  }
  if (type.kind === 'OBJECT') {
    if (type.name === 'Geocode') {
      return <GeocodeEditor {...editProps} />;
    }
  }
  if (suggest) {
    return (
      <SuggestEditor
        {...editProps}
        collection={suggest.arg0}
        field={suggest.arg1}
      />
    );
  }
  if (start) {
    if (type.name === 'Date') {
      return (
        <DateRangeEditor
          {...editProps}
          format="DD.MM.YYYY"
          style={{ width: '100%' }}
        />
      );
    }
    if (type.name === 'DateTime') {
      return (
        <DateRangeEditor
          {...editProps}
          format="DD.MM.YYYY HH:mm"
          showTime={{ format: 'HH:mm' }}
        />
      );
    }
  }
  if (type.kind === 'ENUM' && type.enumValues) {
    let resolveName = item => item;

    if (type.name === 'DOCUMENT_STATE') {
      resolveName = item => states[item];
    }

    return (
      <Select {...editProps}>
        {type.enumValues.map(x => (
          <Select.Option key={x.name} value={x.name}>
            {resolveName(x.name)}
          </Select.Option>
        ))}
      </Select>
    );
  }

  switch (type.name) {
    case 'Blocks':
      return (
        <SlateEditor
          {...editProps}
          binding={form.getFieldsValue()}
          label={label}
        />
      );
    case 'Image':
      return (
        <EditImage {...editProps} style={{ maxWith: '100%' }} width="100%" />
      );
    case 'Boolean':
      return <Checkbox {...editProps}>{label}</Checkbox>;
    case 'Date':
      return <DateEditor {...editProps} format="DD.MM.YYYY" />;
    case 'DateTime':
      return (
        <DateEditor
          {...editProps}
          format="DD.MM.YYYY HH:mm"
          showTime={{ format: 'HH:mm' }}
        />
      );
    case 'Color':
      return <ColorEditor {...editProps} />;
    case 'Markdown':
      return <Input {...editProps} type="textarea" autosize />;
    case 'Slug':
      return <Input {...editProps} />;
    case 'Email':
      return <Input {...editProps} />;
    case 'PhoneNumber':
      return <Input {...editProps} />;
    case 'Website':
      return <Input {...editProps} />;
    case 'Int':
      return <InputNumber {...editProps} placeholder={label || 0} />;
    case 'TimeRange':
      return <TimeRangeEditor {...editProps} />;
    /* case 'user':
        return type.fields.map(field => (
          <Select.Option key={field.name} value={field.name}>{field.name}</Select.Option>
        )); */
    default:
      return <Input {...editProps} />;
  }
};

@@ -4221,24 +4221,144 @@
 'Markdown':%0A
+      // 'autosize' will cause warning:%0A      // %60Infinity%60 is an invalid value for the %60minHeight%60 css style property.%0A
       return
@@ -4356,32 +4356,41 @@
    return %3CInput
+.TextArea
  %7B...editProps%7D 
@@ -4393,23 +4393,10 @@
 ps%7D 
-type=%22textarea%22
+/*
  aut
@@ -4400,16 +4400,19 @@
 autosize
+ */
  /%3E;%0A   

fix warning: `Infinity` is an invalid value for the `minHeight` css style property.