import React, { Fragment } from 'react';
import styled from 'styled-components';
import { Margin } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import { Field } from 'redux-form';
import titleCase from 'title-case';
import remcalc from 'remcalc';

import { H5, Select, Input, FormGroup, FormMeta } from 'joyent-ui-toolkit';

const style = {
  lineHeight: remcalc(48),
  fontSize: remcalc(18)
};

const Bold = styled.span`
  font-weight: ${props => props.theme.font.weight.semibold};
`;

const Values = touched => (
  <Margin right={1}>
    <Select style={style} touched={touched} width={remcalc(130)} embedded>
      <option value="equalling">equalling</option>
      <option value="not-equalling">not equalling</option>
      <option value="containing">containing</option>
      <option value="starting">starting with</option>
      <option value="ending">ending with</option>
    </Select>
  </Margin>
);

export const Rule = ({ valid, ...rule }) => (
  <Margin bottom={valid ? 4 : 8}>
    <Flex alignCenter wrap>
      <H5 style={style} inline noMargin>
        The instance
      </H5>
      <FormGroup name="conditional" field={Field}>
        <Select
          style={style}
          touched={rule.conditional}
          width={remcalc(72)}
          embedded
        >
          <option value="should">should</option>
          <option value="must">must</option>
        </Select>
      </FormGroup>
      <H5 style={style} inline noMargin>
        be on
      </H5>
      <FormGroup name="placement" field={Field}>
        <Select
          style={style}
          touched={rule.placement}
          width={remcalc(100)}
          embedded
        >
          <option value="same">the same</option>
          <option value="different">a different</option>
        </Select>
      </FormGroup>
      <H5 style={style} inline noMargin>
        node as the instance(s) identified by the
      </H5>
      <FormGroup name="type" field={Field}>
        <Select
          style={style}
          touched={rule.type}
          width={remcalc(135)}
          embedded
          left
        >
          <option value="name">instance name</option>
          <option value="tag">tag</option>
        </Select>
      </FormGroup>
      {rule.type === 'tag' ? (
        <Fragment>
          <FormGroup name="key" field={Field}>
            <Input
              style={style}
              onBlur={null}
              type="text"
              placeholder="key"
              small
              embedded
              required
            />
            <FormMeta small absolute />
          </FormGroup>
          <H5 style={style} inline noMargin>
            and value{' '}
          </H5>
          <FormGroup name="pattern" field={Field}>
            {Values(rule.pattern)}
          </FormGroup>
          <FormGroup name="value" field={Field}>
            <Input
              style={style}
              onBlur={null}
              type="text"
              placeholder="value"
              embedded
              required
            />
            <FormMeta small absolute />
          </FormGroup>
        </Fragment>
      ) : (
        <Fragment>
          <FormGroup name="pattern" field={Field}>
            {Values(rule.pattern)}
          </FormGroup>
          <FormGroup name="value" field={Field}>
            <Input
              onBlur={null}
              style={style}
              type="text"
              placeholder="Example instance name: nginx"
              embedded
              required
            />
            <FormMeta absolute />
          </FormGroup>
        </Fragment>
      )}
    </Flex>
  </Margin>
);

export const Header = ({ rule }) => (
  <Fragment>
    <Bold>{titleCase(rule.conditional)}:</Bold> be on a {rule.placement} node as
    the instance(s) identified by the instance {rule.type}
    {rule.type === 'name' ? (
      <Fragment>
        {' '}
        {rule.pattern} “{rule.value}”
      </Fragment>
    ) : (
      <Fragment>
        {' '}
        key “{rule.key}" and the instance tag value{' '}
        {rule.pattern && rule.pattern.split('-').join(' ')} "{rule.value}”
      </Fragment>
    )}
  </Fragment>
);