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
};

@@ -363,48 +363,54 @@
 lder
- = 'example.md';%0A    if (type ==
+, date;%0A    switch (type) %7B%0A      case
  'posts'
 ) %7B%0A
@@ -409,23 +409,17 @@
 sts'
-) %7B
+:
 %0A      
-const
+ 
  dat
@@ -453,16 +453,18 @@
 M-DD');%0A
+  
       pl
@@ -504,34 +504,37 @@
 d%60;%0A    
-%7D else if (type ==
+    break;%0A      case
  'data f
@@ -534,28 +534,28 @@
 'data files'
-) %7B%0A
+:%0A  
       placeh
@@ -587,34 +587,37 @@
 l';%0A    
-%7D else if (type ==
+    break;%0A      case
  'new-te
@@ -627,11 +627,20 @@
 ate'
- %7C%7C
+:%0A      case
  'ed
@@ -655,13 +655,12 @@
 ate'
- ) %7B%0A
+:%0A  
     
@@ -697,24 +697,90 @@
 mple.html';%0A
+        break;%0A      default:%0A        placeholder = 'example.md';%0A
     %7D%0A%0A    l

use case statements for placeholder in InputPath