import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Card,
  FlatButton,
  Divider,
  RaisedButton,
  Toolbar,
  MenuItem,
  ToolbarGroup,
  IconButton,
  ToolbarTitle,
  Dialog,
  Toggle
} from 'material-ui';
import SaveIcon from 'material-ui/svg-icons/content/save';
import PublishIcon from 'material-ui/svg-icons/editor/publish';
import DeleteIcon from 'material-ui/svg-icons/action/delete';
import AddIcon from 'material-ui/svg-icons/content/add';
import { Upload, Icon, Modal, Input, Select, Switch, message, Button as ButtonAntd, Affix} from 'antd'
import {LINKS} from "../../../routes";
import uuid from 'uuid';
//import {appConfig} from "../../../config/app";
import NumberFormat from 'react-number-format';
//import {DIALOG} from "../../../stores/global_ui";
//import ClassDetail from '../index.js';
import DC from 'decimal.js-light';
import { action } from 'mobx/lib/mobx';
const InputGroup = Input.Group;
const { TextArea } = Input;
const Option = Select.Option;
// import AttachmentIcon from 'material-ui/svg-icons/file/attachment';
// import Avatar from 'material-ui/Avatar';
// import Chip from 'material-ui/Chip';

// Require Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';

// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Require Font Awesome.
import 'font-awesome/css/font-awesome.css';

import FroalaEditor from 'react-froala-wysiwyg';


@inject('appstate')
@observer
export default class FormRecipe extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.rewardStore = props.appstate.reward;
    this.state = {
      openedDialogEmpty:false,
      featured_media_exist: false,
      text: '',
      openedDialog: false,
      openDeleteDialog : false,
      saveButton: true,
      value: 1,
      isFree : false,
      searchText: '',
      slideIndex: 0,
      openedDialogBack: false,
      reward_type: "Choose Reward Type",
      expanded: false,
      previewVisible: false,
      previewImage: '',
      fileList: [],
      fileLength: 0,
      fileMainExist: false,
      formData: {
        tags: ['b0819754-fb35-4e52-be67-eb76ca80c5a4'],
        // custom_fields: [],
        // is_free : false
        additional_data : {
          items: []
        }
      },
      disabled_price : false,
      mode: 'create',
      html : "",
      config: {
        placeholderText: 'Edit Your Content Here!',
        charCounterCount: true,
        toolbarStickyOffset: 73,
        toolbarButtons: ['insertLink', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'color', 'align', 'formatOL', 'formatUL', 'embedly', '|', 'insertImage', 'insertVideo', 'insertFile', '|', 'help'],
        quickInsertButtons: ['embedly','hr', 'image', 'video'],
        codeBeautifierOptions: {
          end_with_newline: true,
          indent_inner_html: true,
          extra_liners: "['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'ul', 'ol', 'table', 'dl']",
          brace_style: 'expand',
          indent_char: ' ',
          indent_size: 4,
          wrap_line_length: 0
        },
        heightMin: '50vh'
      }
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
    this.categoryStore = props.appstate.category;
    this.myStoreItem = props.appstate.myStoreItem;
    //this.classStore = props.appstate.class;
    this.recipesStore = props.appstate.recipes;
    this.editor = null;
  }

  async componentDidMount() {
    console.log(this.props.match.params.id,'ini id params')
    window.scrollTo(0, 0);
    // await this.recipesStore.getClassItem(this.props.match.params.id);
    // await this.recipesStore.getClassDetail(this.props.match.params.id)
    // await this.recipesStore.getClassItem();
    
    if(this.props.match.params.id){
      this.recipesStore.getDetail(this.props.match.params.id).then(res => {  
        console.log(this.recipesStore.selected.title,this.recipesStore.selected.content,'res detail')
        
        let newArray = this.recipesStore.selected.additional_data.items.map(it => it);

        let data
        data = {
          title:this.recipesStore.selected.title,
          content:this.recipesStore.selected.content,
          additional_data:{
            items: newArray
          }
        }

        this.setState({
          formData : data,
          text : this.recipesStore.selected.content,
        });
        console.log("new formmm",this.state.formData,this.state.text)

      });

      console.log("new formmm items",this.state.formData.additional_data.items)

      // this.setState({
      //   formData : {
      //     title:this.recipesStore.selected.title,
      //     content:this.recipesStore.selected.content,
      //   },
      //   text : this.recipesStore.selected.content,
      // });
      // console.log("new formmm",this.state.formData,this.state.text,this.state.title)
    }
    else{
        console.log('ini else');
    }

    // $('.fr-wrapper').children[0].style.display = 'none';
    // setTimeout(() => {
    //   $('.fr-wrapper').children[0].style.display = 'none';
    // }, 1000);

    this.recipesStore.getItems();
  }

  handleModelChange = (model) => {
    this.setState({
      text: model
    });
  };

  handleCancel = () => this.setState({ previewVisible: false });


  handleOpen = () => {
    console.log(this.state.html,'heree');
    this.setState({openedDialog: true});
  };

  handleClose = () => {
    this.setState({openedDialog: false});
  };

  goToClassDetail(){
    this.props.history.push(`${LINKS.CLASSES}/${this.props.match.params.id}`);
  }

  postData = () => {
    console.log("post!!!", this.state.formData);
    if(!this.state.formData.title || this.state.formData.title=="" || !this.state.text || this.state.text==""){
      message.success('Title and content cannot be empty!');
      console.log('inikosongdatanya')
      this.setState({openedDialog: false});
      this.setState({openedDialogEmpty:true});
    }
    else{
      this.setState({openedDialog: false});
      this.globalUI.openLoading();
      const data=Object.assign({},this.state.formData);
      data.content=this.state.text;
      // if(typeof data.price === "string"){
      //   data.price = new DC(data.price.replace(/\,/g,"")).toFixed();
      // }

      console.log("data",data);
      this.recipesStore.post(data)
        .then(res => {
          this.globalUI.hideDialogLoading();
          this.globalUI.openSnackbar("Success Added New Recipe");
          this.props.history.push(LINKS.RECIPES);
        })
        .catch(err => {
          this.globalUI.openSnackbar(err.message);
          console.error(err, 'ini errornya');
          
        });
      // this.recipesStore.postClassItem(this.props.match.params.id,data).then(async()=>{
      //   await message.success('Success Added New Course');
      //   await this.globalUI.closeLoading();
      //   await this.recipesStore.getAll();
      //   this.goToClassDetail();
      // })
    }
    
  };

  deleteData = () => {
    
  };

  editData = () => {
    console.log("Edit!!!", this.state.formData);
    if(!this.state.formData.title || this.state.formData.title=="" || !this.state.text || this.state.text==""){
      message.success('Title and content cannot be empty!');
      console.log('inikosongdatanya')
      this.setState({openedDialog: false});
      this.setState({openedDialogEmpty:true});
    }
    else{
      this.globalUI.openLoading();
      this.setState({openedDialog: false});
      const data=Object.assign({},this.state.formData);
      data.content=this.state.text;
      console.log("data",data);
      // if(typeof data.price == "string"){
      //   data.price = new DC(data.price.replace(/\,/g,"")).toFixed();
      // }
      console.log("data",data);
      this.recipesStore.put(this.props.match.params.id,data)
        .then(res => {
          this.globalUI.hideDialogLoading();
          this.globalUI.openSnackbar("Success Edit Recipe");
          this.props.history.push(LINKS.RECIPES);
        })
        .catch(err => {
          this.globalUI.openSnackbar(err.message);
          console.error(err, 'ini errornya');
          
        });
      // this.recipesStore.putClassItem(this.props.match.params.id_course,data).then(async()=>{
      //   await message.success('Success Edit New Course');
      //   await this.globalUI.closeLoading();
      //   await this.recipesStore.getAll();
      //   this.goToClassDetail();
      // })
    }
    
  };

  handleBackClose = () => {
    this.setState({openedDialogBack: false})
  };

  handleEmptyClose = () => {
    this.setState({openedDialogEmpty: false})
  };

  handleEmptyOpen = () => {
    this.setState({openedDialogEmpty: true})
  };

  handleBackOpen = () => {
    this.setState({openedDialogBack: true});
  };

  inputContent = (evt)=>{
    // console.log(evt.target.value);
    this.setState({
      html : evt.target.value
    })
  }

  handleChange = ({ fileList }) => {this.setState({ fileList }); console.log(fileList, 'remove')};

  uploaderHandler({file, onProgress}) {
    console.log(file, 'upload');
    console.log("fileLength", this.state.fileLength);
    console.log("fileMainExist", this.state.fileMainExist);
    this.http.upload(file)
      .then(res => {
        const {fileList} = this.state;
        let newFileList = fileList.filter((obj)=>{
          if(!obj.lastModified){
            return true;
          }

        })
        if(!this.state.fileMainExist){
          newFileList.push({
            uid: newFileList.length,
            name: file.name,
            status: 'done',
            url: this.http.appendImagePath(res.path),
            path: res.path,
            type: 'main'
          });
        }
        else{
          newFileList.push({
            uid: newFileList.length,
            name: file.name,
            status: 'done',
            url: this.http.appendImagePath(res.path),
            path: res.path,
            type: 'gallery'
          });
        }

        console.log("update fileList",fileList);
        console.log("new fileList",newFileList);
        this.setState({fileList : newFileList});
      })
      

  }

  handleWarningDialog = (bool)=>{
    this.setState({
      openDeleteDialog : bool
    })
  }

  setFree = (bool) =>{
    this.setState({
      formData : {
        ...this.state.formData,
        is_free: bool,
        price : 0
      },
      disabled_price : bool
    })
  }

  render() {

    //add mock data for tag option, change this if api for tag is complete
    const children = [];
    for (let i = 10; i < 36; i++) {
      children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
    }

    const { previewVisible, previewImage, fileList } = this.state;

    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );

    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        style={{marginRight: 10}}
        onClick={this.handleClose}
      />,
      <RaisedButton
        label={this.props.match.params.id ? "Edit" : "Publish"}
        primary={true}
        onClick={this.props.match.params.id ? this.editData : this.postData}
      />,
    ];

    const actionsDelete = [
      <FlatButton
        label="Cancel"
        primary={true}
        style={{marginRight: 10}}
        onClick={()=>this.handleWarningDialog(false)}
      />,
      <RaisedButton
        label={"Delete"}
        primary={true}
        onClick={this.deleteData}
      />,
    ];

    const actionsBack = [
      <FlatButton
        label="No"
        primary={true}
        style={{marginRight: 10}}
        onClick={this.handleBackClose}
      />,
      <RaisedButton
        label="Yes"
        primary={true}
        onClick={() => this.props.history.goBack()}
      />,
    ];

    const actionsEmpty = [
      <RaisedButton
        label="Yes"
        primary={true}
        onClick={this.handleEmptyClose}
      />,
    ];

    const wrapperText = key => ele => React.cloneElement(ele, {
  	  value: this.state.formData[key],
  	  onChange: (e) => {
          let data = e.target.value
          this.setState({
            formData: {
              ...this.state.formData,
              [key]: data
            }
          });
            // if(!this.state.formData.title || !this.state.text){
            //   this.setState({saveButton:true});
            // }
            // else{
            //   this.setState({saveButton:false});
            // }
  	    console.log("value",this.state.formData[key]);
        console.log("value2",e.target.value);
        console.log("key",key);
      }
    });

    const wrapperSelectANT = key => ele => React.cloneElement(ele, {
      value: this.state.formData.additional_data[key],
      //value: ['dori','mana'],
      // errorText: this.state.errorText[key],
      onChange: (v) => {
        this.setState({
          formData: {
            ...this.state.formData,
            additional_data:{
              [key] : v
            }
            // ...this.state.formData.additional_data,
            // [key]: v,
          }
        }, () => {
          // this.triggerOnChange(key)
          console.log("value",this.state.formData.additional_data[key]);
          console.log("value2",v);
          console.log("key",key);
          // console(value,'value3')
        });
      }
    });

    // const wrapperSelect = key => ele => React.cloneElement(ele, {
    //   value: this.state.formData[key],
    //   onChange: (e, k, v) => {
    //     this.setState({
    //       formData: {
    //         ...this.state.formData,
    //         [key]: e,
    //       }
    //     }, () => this.triggerOnChange());
    //   }
    // });

    // const editorOptions = {
    //   commands: [
    //     {
    //         command: 'bold',
    //         key: 'b',
    //         meta: true,
    //         shift: false
    //     },
    //     {
    //         command: 'italic',
    //         key: 'i',
    //         meta: true,
    //         shift: false
    //     },
    //     {
    //         command: 'underline',
    //         key: 'u',
    //         meta: true,
    //         shift: false
    //     }
    //   ],
    //   toolbar: {
    //       buttons: ['h1','h2','h3','bold', 'italic', 'underline', 'image', 'video','anchor']
    //   },
    //   extensions:{
    //     'video': new MediumButton({
    //       label:'<b>Video</b>',
    //       tagNames:['video'],
    //       // start:'<video width="100%" heigth="100%" controls="true" src="',
    //       // end:'" />',
    //       action: (markedWord,isMarked,parent)=>{
    //         console.log("markedWord",markedWord);
    //         console.log("isMarked",isMarked);
    //         console.log("parent",parent);
    //         // return markedWord;
    //         if(markedWord.includes(("youtube"||"facebook"))){
    //           return '<iframe width="90%" heigth="100%" controls="true" src="'+markedWord+'" style="vertical-align:middle" />';
    //         }
    //         else{
    //           return '<video width="90%" heigth="100%" controls="true" src="'+markedWord+'" style="vertical-align:middle" />';
    //         }
    //       }
    //     })  
    //   }
    // }

    return (

      <div style={{marginTop: 35}}>
        <div className="row">
          <div className="col s12">
            <Card className="animated fadeIn cardLite" style={{marginLeft: 12, marginRight: 12}}>
              <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                <ToolbarGroup>
                  <IconButton
                    iconClassName="material-icons"
                    tooltip="Back"
                    style={{marginLeft: '-10px'}}
                    onClick={this.handleBackOpen}
                  >
                    arrow_back
                  </IconButton>
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={this.props.match.params.id ? 'Edit Recipe' : 'Create Recipe'}/>
                </ToolbarGroup>
                <ToolbarGroup>
                  {/*<Button>Submit</Button>*/}
                  {!(this.state.mode == 'create') ? <RaisedButton onClick={()=>this.handleWarningDialog(true)} icon={<DeleteIcon/>} label="Delete" primary={true} style={{marginRight : '1px'}}/> : ''}
                  {/*!(this.state.mode == 'update') ? <RaisedButton icon={<SaveIcon/>} label="Save as draft" primary={true} style={{marginRight : '1px'}}/> : ''*/}
                  
                </ToolbarGroup>
              </Toolbar>
            </Card>
          </div>
        </div>
        <div className={"row"}>
          <div className={"col s12"}>
            <div className="row">
              <div className={"col s9"}>
                <Card className="animated fadeIn cardLite">
                <FroalaEditor
                    model={this.state.text}
                    config={this.state.config}
                    onModelChange={this.handleModelChange}
                    onManualControllerReady={(initControls) => {
                      console.log(initControls, 'initControls initControls');
                      initControls.initialize();
                      this.editor = initControls.getEditor();
                      this.editor().on('froalaEditor.image.beforeUpload', (e, editor, files) => {
                        if (files.length) {
                          let name = files[0].name;
                          this.props.appstate.http.upload(files[0]).then(it => {
                            editor.image.insert(this.http.appendImagePath(it.path), name, null, editor.image.get());
                            // console.log(it);
                          });
                          // let reader = new FileReader();
                          // reader.onload = (e) => {
                          //   let result = e.target.result;
                          //   editor.image.insert(result, null, null, editor.image.get());
                          // };
                          // reader.readAsDataURL(files[0]);
                        }
                        return false;
                      });

                      this.editor().on('froalaEditor.file.beforeUpload', (e, editor, files) => {
                        // console.log(e, editor, files, 'blah blah blah')
                        if (files.length) {
                          let name = files[0].name;
                          this.props.appstate.http.upload(files[0]).then(it => {
                            editor.file.insert(this.http.appendImagePath(it.path), name, null);
                            // console.log(it);
                          });
                        }
                        return false;
                      });

                      this.editor().on('froalaEditor.video.beforeUpload', (e, editor, files) => {
                        // console.log(e, editor, files, 'blah blah blah')
                        if (files.length) {
                          let name = files[0].name;
                          // console.log(editor.video);
                          this.props.appstate.http.upload(files[0]).then(it => {
                            this.editor('video.insert', `<iframe controls="true" width="90%" height="100%" src="${this.http.appendImagePath(it.path)}" style="vertical-align:middle"/>`, false);
                            // console.log(it);
                          });
                        }
                        return false;
                      });
                    }}
                  />
                </Card>
              </div>
              <div className={"col s3"}>
                <Affix offsetTop={85}>
                  <Card className="animated fadeIn cardLite">
                    <div style={{padding: '14px'}}>
                      <div className="row">
                        <p className="label-form">Title Recipe</p>
                        {wrapperText("title")(
                          <Input placeholder="E.g. Ikan Kakap Saus Tomat" autosize type={"text"}/>
                        )}
                      </div>
                      
                      <div className="row">
                        <p className="label-form">Items</p>
                        {wrapperSelectANT("items")(<Select
                          mode="multiple"
                          style={{ width: '100%' }}
                          placeholder="E.g Dori,Cumi,Ikan"
                          optionFilterProp="children"
                          filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        >
                          {this.recipesStore.listItems.map(data=>{
                            return <Option key={data.id} value={data.id}>{data.name}</Option>
                          })}
                        </Select>)}
                      </div>

                      {this.props.match.params.id ? (<ButtonAntd type={'primary'} style={{width: '100%', marginTop: 25}} onClick={this.handleOpen} icon={'upload'}>Edit</ButtonAntd>) : (<ButtonAntd type={'primary'} style={{width: '100%', marginTop: 25}} onClick={this.handleOpen} icon={'upload'}>Publish</ButtonAntd>)}
                      {/* <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
                        <span className="label-form" style={{marginTop: 5}}>Free Course?</span>
                        <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon style={{color: '#fff'}} type="cross" />} onChange={this.setFree} checked={this.state.disabled_price}/>
                      </div> */}
                      {/* {
                        this.recipesStore.classData.type === 'pay_per_course' ?
                          <div className="row" style={{marginTop: 27}}>
                            <p className="label-form">Price</p>
                            {wrapperText("price")(
                              <NumberFormat disabled={this.state.disabled_price} thousandSeparator={true} style={{ width: '100%', padding: '4px 11px', height: '32px', fontSize: '14px', border: '1px solid #d9d9d9', borderRadius: '4px' }} placeholder="E.g. 50" />
                            )}
                          </div>
                          : <div></div>
                      } */}
                      {/*<RaisedButton onClick={() => {*/}
                        {/*this.props.appstate.files.onFileSelected = (path,mime_type) => {*/}
                          {/*console.log("this.props.appstate.files.onFileSelected",this.props.appstate.files.lastFile);*/}
                          {/*let file = this.props.appstate.files.lastFile;*/}
                          {/*if(!this.state.featured_media_exist && file.mime_type.includes("image")){*/}
                            {/*this.setState({formData:{...this.state.formData, featured_media:path,featured_media_type:file.mime_type}});*/}
                            {/*this.setState({featured_media_exist:true});*/}
                            {/*console.log("featuredExistNow");*/}
                          {/*}*/}
                          {/*// this.mediumEditorInstance.restoreSelection();*/}
                          {/*if(file.mime_type.includes("image")){*/}
                            {/*this.editor('image.insert', this.http.appendImagePath(path), true);*/}
                            {/*// this.mediumEditorInstance.pasteHTML(*/}
                            {/*//   `<img src="${this.http.appendImagePath(path)}" style="margin: 0 auto;">`,*/}
                            {/*//   {cleanAttrs: []});*/}
                          {/*}*/}
                          {/*else if(file.mime_type.includes("video")){*/}
                            {/*this.editor('html.insert', `<video controls="true" width="90%" height="100%" src="${this.http.appendImagePath(path)}" style="vertical-align:middle"/>`, false);*/}
                            {/*// this.mediumEditorInstance.pasteHTML(*/}
                            {/*//   `<video controls="true" width="90%" height="100%" src="${this.http.appendImagePath(path)}" style="vertical-align:middle"/>`,*/}
                            {/*//   {cleanAttrs: []});*/}
                          {/*}*/}
                          {/*else if(file.mime_type.includes("audio")){*/}
                            {/*this.editor('html.insert', `<audio controls="true" width="90%" height="100%" src="${this.http.appendImagePath(path)}" style="vertical-align:middle"/>`, false);*/}
                            {/*// this.mediumEditorInstance.pasteHTML(*/}
                            {/*//   `<audio controls="true" width="90%" height="100%" src="${this.http.appendImagePath(path)}" style="vertical-align:middle"/>`,*/}
                            {/*//   {cleanAttrs: []});*/}
                          {/*}*/}
                          {/*else if(file.mime_type.includes("application")){*/}
                            {/*this.editor('file.insert', this.http.appendImagePath(path), file.name);*/}
                            {/*// this.mediumEditorInstance.pasteHTML(*/}
                            {/*//   `*/}
                            {/*//     <file src=${this.http.appendImagePath(path)} style="display:inline-block;height:150px; width:150px;">*/}
                            {/*//       <div style="height:150px; width:150px; text-align:center; margin: 0 auto;box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;">*/}
                            {/*//         <svg fill="#999" height="150" viewBox="0 0 24 24" width="150" xmlns="http://www.w3.org/2000/svg">*/}
                            {/*//             <path d="M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5C8.12 15 7 13.88 7 12.5S8.12 10 9.5 10H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z"/>*/}
                            {/*//             <path d="M0 0h24v24H0V0z" fill="none"/>*/}
                            {/*//         </svg>*/}
                            {/*//         </div>*/}
                            {/*//       </div>*/}
                            {/*//     </file>*/}
                            {/*//   `,*/}
                            {/*//   {cleanAttrs: []});*/}
                          {/*}*/}

                        {/*};*/}
                        {/*// this.mediumEditorInstance.saveSelection();*/}
                        {/*this.props.appstate.globalUI.showDialog(DIALOG.MEDIA.SELECT);*/}
                      {/*}} style={{marginTop: this.recipesStore.classData.type !== 'pay_per_course' ? 25 : 10}} icon={<AttachmentIcon/>} label="Attachments" primary={true} fullWidth={true} />*/}
                    </div>
                  </Card>
                </Affix>
              </div>
            </div>

            <Dialog
              title="Warning"
              actions={actions}
              modal={true}
              open={this.state.openedDialog}
              onRequestClose={() => this.handleClose()}
            >
              Make sure all of your data is correct before submitting.
            </Dialog>
            <Dialog
              title="Warning"
              actions={actionsBack}
              modal={true}
              contentStyle={{width: 350}}
              open={this.state.openedDialogBack}
              onRequestClose={() => this.handleBackClose()}
            >
              Are you sure you wanna go back ?
            </Dialog>

            <Dialog
              title="Warning"
              actions={actionsDelete}
              modal={true}
              open={this.state.openDeleteDialog}
              onRequestClose={() => this.handleWarningDialog(false)}
            >
              Are you sure want to delete this item?
            </Dialog>

            <Dialog
              title="Warning"
              actions={actionsEmpty}
              modal={true}
              contentStyle={{width: 350}}
              open={this.state.openedDialogEmpty}
              onRequestClose={() => this.handleEmptyClose()}
            >
              Title and content cannot be empty !
            </Dialog>
          </div>
        </div>
      </div>
    )
  }
}
