text: import React, { Component } from 'react'
  import Header from '../header/Header'
  import Subheader from '../subheader/Subheader'
  import { Redirect, Link } from 'react-router-dom'
  import './Superuser.css'
  import getTranslation from '../../i18n/'
  import Cookies from 'universal-cookie';
  import Rte from './Rte'
  const cookies = new Cookies();
  
  /**
   * Form to add content to a page on the landing pages
   */
  class SiteContentForm extends Component {
  
      constructor(props) {
          super(props);
          let id = 0;
          let title = '';
          let title_de = '';
          let title_cz = '';
          let title_sl = '';
          let title_sk = '';
          let title_pl = '';
  
          let text = '';
          let text_de = '';
          let text_cz = '';
          let text_pl = '';
          let text_sk = '';
          let text_sl = '';
          let position = 1;
          let activated = 1;
          if(Number(props.id) !== 0) {
  
              let filter = props.sitecontent.filter(content => content.id === Number(props.id));
              if(filter.length > 0) {
                  filter = filter[0];
                  id = filter.id;
                  title = filter.title;
                  title_de = filter.title_de;
                  title_cz = filter.title_cz;
                  title_pl = filter.title_pl;
                  title_sk = filter.title_sk;
                  title_sl = filter.title_sl;
                  text = filter.text;
                  text_de = filter.text_de;
                  text_cz = filter.text_cz;
                  text_pl = filter.text_pl;
                  text_sk = filter.text_sk;
                  text_sl = filter.text_sl;
                  position = filter.position;
                  activated = filter.activated;
              }
          }
  
          this.state = {
              redirect: false,
              activated: activated,
              id: id,
              title: title,
              title_de: title_de,
              title_cz: title_cz,
              title_pl: title_pl,
              title_sk: title_sk,
              title_sl: title_sl,
              text: text,
              text_de: text_de,
              text_cz: text_cz,
              text_pl: text_pl,
              text_sk: text_sk,
              text_sl: text_sl,
              position: position,
              errors: [],
              required: [
                  "title", "text", "position"
              ],
              deleteButton: false,
              deleteButtonExpanded: false
          }
  
  
      }
  
      componentDidMount() {
          if(!this.props.user.superuser) {
              this.setState({redirect: true})
          }
      }
      
      /**
       * Update the field state on input
       * @param  {} event
       */
      updateField(event) {
          const target = event.target;
          const name = target.name;
          const value = target.type === 'checkbox' ? target.checked : target.value;
  
          let errors = this.state.errors;
  
          if(this.state.required.indexOf(name) !== -1) {
              if(value === '') {
                  errors[name] = true;
              } else {
                  errors[name] = false;
              }
          }
  
          this.setState({ [name] : value, errors: errors });
      }
  
      /**
       * Submit the form by dispatching the saveSiteContent action with the form state + JWT token
       */
      submitForm() {
          let errorMessages = [];
          let errors = this.state.errors;
          let required = [];
          this.state.required.map(field => {
              if(this.state[field] === '') {
                  required.push(field);
                  errors[field] = true;
              }
  
          })
  
          if(required.length > 0) {
              errorMessages.push("forms.general.error.message.fields_required");
          }
  
          let redirect = false;
           if(errorMessages.length === 0) {
              let token = cookies.get('token');
              redirect = true;
  
              this.props.saveSiteContent(
                this.state.id,
                this.state.activated,
                this.props.page,
                this.state.title,
                this.state.title_de,
                this.state.title_cz,
                this.state.title_pl,
                this.state.title_sk,
                this.state.title_sl,
                this.state.text,
                this.state.text_de,
                this.state.text_cz,
                this.state.text_pl,
                this.state.text_sk,
                this.state.text_sl,
                this.state.position,
                token)
              this.setState({redirect: redirect, errors: errors, errorMessages: errorMessages })
          }
  
      }
  
      /**
       * Update the description field (RTE)
       * @param  {} input
       * @param  {} language
       */
      updateText(input, language) {
          if(language)
           {
             this.setState({[language]: input});
           } else {
             this.setState({text: input});
           }
      }
  
      /**
       * Toggle the delete buttons
       */
      toggleDelete() {
          this.setState({deleteButtonExpanded: !this.state.deleteButtonExpanded})
      }
  
      removeGlossary() {
          let token = cookies.get('token');
          this.props.removePage(this.props.id, token);
          this.setState({redirect: true})
      }
  
  
      render() {
  
          return(
  
              <div>
              {this.state.redirect &&
                  <Redirect to="/experts/superuser" />
              }
                <Header />
                <div className="container container-small">
                  <Subheader title="expert.subheader.title.contribute" />
                  <div className="default-element">
  
                    <div className="default-element-content">
                    <h4><i className="fa fa-calendar" aria-hidden="true"></i> Web-portal Page</h4>
  
                    <div className="user-profile form-container">
  
                        <div className="form-item">
                          <label className="centered">Title:{this.state.errors.title && <span className="validation-error">{getTranslation('forms.general.error.hints.field_required')}</span>}</label>
                          <input className={(this.state.errors.title ? 'v-error' : 'v-check')} name="title" type="text" value={this.state.title} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
                        </div>
  
                        <div className="form-item">
                          <label className="centered">Title DE:</label>
                          <input name="title_de" type="text" value={this.state.title_de} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
                        </div>
  
                        <div className="form-item">
                          <label className="centered">Title CZ:</label>
                          <input name="title_cz" type="text" value={this.state.title_cz} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
                        </div>
  
                        <div className="form-item">
                          <label className="centered">Title PL:</label>
                          <input name="title_pl" type="text" value={this.state.title_pl} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
                        </div>
  
                        <div className="form-item">
                          <label className="centered">Title SK:</label>
                          <input name="title_sk" type="text" value={this.state.title_sk} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
                        </div>
  
                        <div className="form-item">
                          <label className="centered">Title SL:</label>
                          <input name="title_sl" type="text" value={this.state.title_sl} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
                        </div>
  
                        <div className="form-item">
                          <label className="centered">Position on page:{this.state.errors.position && <span className="validation-error">{getTranslation('forms.general.error.hints.field_required')}</span>}</label>
                          <input className={(this.state.errors.position ? 'v-error' : 'v-check')} name="position" type="text" value={this.state.position} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
  
                        </div>
  
                        <div className="form-item">
                          <label className="centered">Text:{this.state.errors.text && <span className="validation-error">{getTranslation('forms.general.error.hints.field_required')}</span>}</label>
                          <Rte content={this.state.text} updateText={(input) => this.updateText(input)} />
                        </div>
  
                        <div className="form-item">
                          <label className="centered">Text: DE</label>
                          <Rte content={this.state.text_de} updateText={(input) => this.updateText(input, "text_de")} />
                        </div>
  
                        <div className="form-item">
                          <label className="centered">Text: CZ</label>
                          <Rte content={this.state.text_cz} updateText={(input) => this.updateText(input, "text_cz")} />
                        </div>
  
                        <div className="form-item">
                          <label className="centered">Text: PL</label>
                          <Rte content={this.state.text_pl} updateText={(input) => this.updateText(input, "text_pl")} />
                        </div>
  
                        <div className="form-item">
                          <label className="centered">Text: SK</label>
                          <Rte content={this.state.text_sk} updateText={(input) => this.updateText(input, "text_sk")} />
                        </div>
  
                        <div className="form-item">
                          <label className="centered">Text: SL</label>
                          <Rte content={this.state.text_sl} updateText={(input) => this.updateText(input, "text_sl")} />
                        </div>
  
                        <div className="user-profile-item">
                        <button className="btn btn-green btn-icon btn-save" onClick={() => this.submitForm()}>Save text</button>
                        <Link to="/experts/superuser"><button className="btn btn-gray btn-icon btn-cancel">{getTranslation("forms.general.button.cancel")}</button></Link>
                        {((!this.state.deleteButtonExpanded) && (this.state.deleteButton)) &&
                            <button className="btn btn-red btn-icon btn-delete" onClick={() => this.toggleDelete()}>{getTranslation("forms.general.button.delete")}</button>
                        }
                        {this.state.deleteButtonExpanded &&
                            <span>
                                <button className="btn btn-red btn-icon btn-delete" onClick={() => this.removeGlossary()}>{getTranslation("forms.general.button.confirm_delete")}</button>
                                <button className="btn btn-gray btn-icon btn-cancel" onClick={() => this.toggleDelete()}>{getTranslation("forms.general.button.cancel_delete")}</button>
                            </span>
                        }
                        </div>
  
  
                    </div>
                    </div>
                </div>
              </div>
              </div>
          )
      }
  }
  
  export default SiteContentForm
  