/**
*
* SmsTest
*
*/

import React from 'react';
// import styled from 'styled-components';

// import { FormattedMessage } from 'react-intl';
// import messages from './messages';
import { injectIntl, intlShape } from 'react-intl';
import messages from './messages';
import FormBuilder from '../FormBuilder';

class SmsTest extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.saveFormData = this.saveFormData.bind(this);
    this.onFormDataChange = this.onFormDataChange.bind(this);
    this.onTemplateNameChange = this.onTemplateNameChange.bind(this);
    this.onTemplateContentChange = this.onTemplateContentChange.bind(this);
  }

  onTemplateNameChange(name) {
    
  }

  onTemplateContentChange(content) {
    
  }

  onFormDataChange(formData) {
    
  }

  saveFormData(formData) {
    //Logic to save in db etc
    
  }
  render() {
    const schema = {
      inputFields: [
        {
          id: "template-name",
          label: "Template Name",
          type: "input",  //Resembles component to be used
          metaType: "text",
          datatype: "string",
          required: true,
          placeholder: this.props.intl.formatMessage(messages.inputTemplateName),
          fluid: true,
          styling: "semantic",
          order: 1,
          customComponent: false,
          supportedEvents: {
            onChange: this.onTemplateNameChange,
          },
        },
        {
          id: "sms-editor",
          label: "Template Content",
          type: "SmsEditor",
          metaType: "text",
          datatype: "string",
          required: true,
          placeholder: this.props.intl.formatMessage(messages.inputSmsTemplate),
          fluid: false,
          styling: "custom",
          order: 2,
          customComponent: true,
          supportedEvents: {
            onChange: this.onTemplateContentChange,
          },
        },
      ],
      actionFields: [
        {
          id: "submit-button",
          metaType: "submit-button",
          type: "button",
          value: "Create Template",
          customComponent: false,
          styling: "semantic",
          order: 3,
          fluid: false,
          supportedEvents: {
            onClick: this.saveFormData,
          },
        },
      ],
      channel: "SMS",
      module: "Campaigns",
    };
    const json = {
      "sms-editor": "asa121s",
      "template-name": "台北",
    };
    return (
      <div>
        <FormBuilder
          formData={json}
          schema={schema}
          onSubmit={this.saveFormData}
          onChange={this.onFormDataChange}
          usingTabContainer
         />
      </div>
    );
  }
}

SmsTest.propTypes = {
  intl: intlShape.isRequired,
};

export default injectIntl(SmsTest);
