import React, { Component } from 'react';

import {
  EuiButton,
  EuiFieldText,
  EuiForm,
  EuiFormRow,
  EuiComboBox,
  EuiTextArea,
} from '@elastic/eui';
import products from '../services/Product'
import {addProduct} from '../reducers/Actions'
import Store from '../Store'
import {connect} from 'react-redux'
import makeId from '@elastic/eui';
import { CENTER_ALIGNMENT } from '@elastic/eui';

const ProductService = new products()

class ProductNew extends Component {
    constructor(props) {
        super(props);

        this.options=[
            {
                label: 'active',
                // 'data-test-sub': 'titanOptions',
            },
            {
                label: 'non active',
            }
        ]

        this.state = {
          productName: '',
          slug:'',
          value: '',
          selectedOptions: [this.options[0]],
          datas:[]
        }
    }

      handleChange(date) {
        this.setState({
          startDate: date,
        });
      }

      onChange = (selectedOptions) =>{
            this.setState({
                selectedOptions: selectedOptions
            })
      }

      onEdit = (e) =>{
          this.setState({
              value : e.target.value
          })
      }

      onSave = () =>{
        let status = 0
          if (this.state.selectedOptions[0].label == "active") {
              status = 1
          }
        let product = {
            id: this.props.product.length + 1,
            productname : this.state.productName,
            slug: this.state.slug,
            description: this.state.value,
            status: status
        }
        ProductService.postProduct(product)
        Store.dispatch(addProduct(product))
      }

  onSwitchChange = () => {
    this.setState({
      isSwitchChecked: !this.state.isSwitchChecked,
    });
  };

  onCheckboxChange = optionId => {
    const newCheckboxIdToSelectedMap = {
      ...this.state.checkboxIdToSelectedMap,
      ...{
        [optionId]: !this.state.checkboxIdToSelectedMap[optionId],
      },
    };

    this.setState({
      checkboxIdToSelectedMap: newCheckboxIdToSelectedMap,
    });
  };

  onRadioChange = optionId => {
    this.setState({
      radioIdSelected: optionId,
    });
  };

  render() {
    return (
      <div style={{ width: 850 }}>
        <EuiForm style={{ textAlign: "left" }}>
        <div style={{ marginLeft: 250 }}>
          <EuiFormRow
            label="Nama Produk"
            compressed>
            <EuiFieldText
                placeholder="masukan nama prodak"
                value= {this.state.productName}
                onChange={(e) => this.setState({
                    productName : e.target.value
                })}
            />
          </EuiFormRow>

          <EuiFormRow
            label="Slug"
            compressed>
            <EuiFieldText
                placeholder="Masukan Slug"
                value= {this.state.slug}
                onChange={(e) => this.setState({
                    slug : e.target.value
                })}

            />
          </EuiFormRow>
          <EuiFormRow label="Deskripsi" compressed>
         <EuiTextArea
            placeholder="Masukan Deskripsi"
            aria-label="Masukan Deskripsi"
            value={this.state.value}
            onChange={this.onEdit}
          />
          </EuiFormRow>
          <EuiFormRow label="Status" compressed>
            <EuiComboBox

                placeholder="select status"
                singleSelection={{statusProduct: true}}
                options = {this.options}
                selectedOptions={this.state.selectedOptions}
                onChange={this.onChange}
                isClearable={false}
            />
          </EuiFormRow>

            <EuiButton type="submit" size="l" fill onClick={this.onSave}>
                Simpan
            </EuiButton>
          </div>

        </EuiForm>
      </div>
    );
  }
}

const MapToProps = state =>{
  return{
    product : state.rootReducer.product
  }
}

export default connect(MapToProps)(ProductNew)