import * as React from 'react';
import * as _ from 'lodash';
import LexSingleInput from './LexSingleInput';
import {
  Image,
  Input,
  Card,
  Button
} from 'semantic-ui-react';
const { Box } = require('reflexbox');

const imageRoot = 'http://localhost:3000/png/';

export const fieldMetaMap = {
  'label': { lens: 'label[0]', type: 'text' },
  'unl': { lens: 'unl[0]', type: 'text' },
  'synset': { lens: 'lexprops[0].wnsynset[0]', type: 'text' },
  'guid': { lens: 'guid[0]', type: 'text' },
  'pos': { lens: 'pos[0]', type: 'select' },
  'image': { lens: 'image[0]', type: 'preview' },
  'relations': { lens: 'relations[0]', type: 'text' },
  'frame': { lens: 'syntacticprops[0].property[0]._', type: 'select' },
  'morphclass': {
    lens: 'lexprops[0].morphology[0].morph[0]._',
    type: 'select'
  },
  'stats': { lens: 'stats[0].property[0]._', type: 'text' },
  'lang': { lens: '$.id', type: 'select' },
};

export class LexEdit extends React.Component<any, any> {
  public render() {
    let li = this.props.lexItem;
    let lexFields = _.keys(fieldMetaMap).map(field => {
      let defaultText = _.get<any>(li, fieldMetaMap[field].lens, '');
      let sh = (e: any) => {
        let eventData = {};
        eventData[field] = e.target.value;
        this.handleOnChange(eventData);
      };
      // let pred = (x: any) => _.isEqual(fieldMetaMap[ft].type, x);
      // _.findIndex(['text', 'number'], pred) !== -1
      if (fieldMetaMap[field].type === 'text') {
        return (
          <LexSingleInput key={field} labelText={_.capitalize(field)}>
            <Input
              onChange={sh}
              defaultValue={defaultText}
              placeholder={field}
              type="text"
              dir="auto"
              style={{ width: '10em' }}
            />
          </LexSingleInput>
        );
      } else if (fieldMetaMap[field].type === 'select') {
        return (
          <LexSingleInput key={field} labelText={_.capitalize(field)}>
            <select
              onChange={sh}
              style={{ width: '10em' }}
              defaultValue={defaultText}
            >
              {this.props.selectionMeta[field].map((k: any, i: any, c: any) => {
                return <option key={i} value={k}> {k}</option>;
              })}
            </select>
          </LexSingleInput>
        );
      } else if (fieldMetaMap[field].type === 'preview' && defaultText !== '') {
        let imageSrc = imageRoot + defaultText;
        return (
          <LexSingleInput key={field} labelText={_.capitalize(field)}>
            <Image src={imageSrc} size="tiny" bordered={true} />
          </LexSingleInput>
        );
      } else {
        return null;
      }
    });
    return (
      <Box m={2}>
        <Card raised={true}>
          <Card.Content>
            <Card.Header>
              {_.get<any>(li, 'label', '')}
            </Card.Header>
            <Card.Meta>
              language: {_.get<any>(li, '$.id', '')}
            </Card.Meta>
            <Card.Description>
              {lexFields}
            </Card.Description>
          </Card.Content>
          <Card.Content extra={true}>
            <Button
              basic={true}
              fluid={true}
              color="green"
              onClick={(e, d) => this.handleOnSave(d)}
            >
              Save
            </Button>
          </Card.Content>
        </Card>
      </Box>
    );
  }

  private handleOnChange(event: any) {
    this.setState(event);
  }

  private handleOnSave(event: any) {
    console.log('saving object', this.props.lexItem);
  }
}