import React, { Component, PropTypes } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import moment from 'moment';

export default class InputFilename extends Component {

  handleChange(e){
    const { onChange } = this.props;
    onChange(e.target.value);
  }

  render() {
    const { path, type, onBlur } = this.props;

    let placeholder = 'example.md';
    if (type == 'posts') {
      const date = moment().format('YYYY-MM-DD');
      placeholder = `${date}-your-title.md`;
    } else if (type == 'data files') {
      placeholder = 'your-filename.yml';
    } else if (type == 'new-template' || 'edit-template' ) {
      placeholder = 'directory/example.html';
    }

    let tooltip, msg = null;
    if (type == 'new-template') {
      msg = (
        <span className="tooltip-text">
          The Templates Index page lists only <b>directories</b>.
          e.g. <b>_layouts/archive.html</b>
        </span>
      );
    } else if (type == 'edit-template') {
      msg = (
        <span className="tooltip-text">
          Changing the file-extension here will not update the syntax highlighting mode
          of the Editor till you save.
        </span>
      );
    } else {
      msg = (
        <span className="tooltip-text">
          If you leave <b>path</b> blank, it will be autogenerated from title.
        </span>
      );
    }

    if (type != 'data files') {
      tooltip = (
        <span className="tooltip">
          <i className="fa fa-info-circle" aria-hidden="true" />
          {msg}
        </span>
      );
    }
    return (
      <div className="input-path">
        <label>Path {tooltip}</label>
        <TextareaAutosize
          key={path}
          onChange={(e) => this.handleChange(e)}
          onBlur={onBlur}
          placeholder={placeholder}
          defaultValue={path}
          ref="input" />
      </div>
    );
  }
}

InputFilename.propTypes = {
  path: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func
};

import React, { Component, PropTypes } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import moment from 'moment';

export default class InputFilename extends Component {

  handleChange(e){
    const { onChange } = this.props;
    onChange(e.target.value);
  }

  render() {
    const { path, type, onBlur } = this.props;

    let placeholder, date;
    switch (type) {
      case 'posts':
        date = moment().format('YYYY-MM-DD');
        placeholder = `${date}-your-title.md`;
        break;
      case 'data files':
        placeholder = 'your-filename.yml';
        break;
      case 'new-template':
      case 'edit-template':
        placeholder = 'directory/example.html';
        break;
      default:
        placeholder = 'example.md';
    }

    let tooltip, msg = null;
    if (type == 'new-template') {
      msg = (
        <span className="tooltip-text">
          The Templates Index page lists only <b>directories</b>.
          e.g. <b>_layouts/archive.html</b>
        </span>
      );
    } else if (type == 'edit-template') {
      msg = (
        <span className="tooltip-text">
          Changing the file-extension here will not update the syntax highlighting mode
          of the Editor till you save.
        </span>
      );
    } else {
      msg = (
        <span className="tooltip-text">
          If you leave <b>path</b> blank, it will be autogenerated from title.
        </span>
      );
    }

    if (type != 'data files') {
      tooltip = (
        <span className="tooltip">
          <i className="fa fa-info-circle" aria-hidden="true" />
          {msg}
        </span>
      );
    }
    return (
      <div className="input-path">
        <label>Path {tooltip}</label>
        <TextareaAutosize
          key={path}
          onChange={(e) => this.handleChange(e)}
          onBlur={onBlur}
          placeholder={placeholder}
          defaultValue={path}
          ref="input" />
      </div>
    );
  }
}

InputFilename.propTypes = {
  path: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func
};

use case statements for placeholder in InputPath