import {
  Table,
  Input,
  InputNumber,
  Form,
  Typography,
  Button,
  Icon,
  notification
} from 'antd';
import React from 'react';

// import "./AddJenisTool.css";

const { Text } = Typography;
const FormItem = Form.Item;
const EditableContext = React.createContext();

const openNotificationWithIcon = (type, msg) => {
  notification[type]({
    message: 'Notification',
    description: msg
  });
};

class EditableCell extends React.Component {
  getInput = () => {
    if (this.props.inputType === 'number') {
      return <InputNumber style={{ width: '80%' }} />;
    }
    return <Input style={{ width: '80%' }} />;
  };

  render() {
    const {
      editing,
      dataIndex,
      title,
      inputType,
      record,
      index,
      ...restProps
    } = this.props;
    return (
      <EditableContext.Consumer>
        {form => {
          const { getFieldDecorator } = form;
          return (
            <td {...restProps}>
              {editing ? (
                <FormItem style={{ margin: 0 }}>
                  {getFieldDecorator(dataIndex, {
                    rules: [
                      {
                        required: true,
                        message: `Please Input ${title}!`
                      }
                    ],
                    initialValue: record[dataIndex]
                  })(this.getInput())}
                </FormItem>
              ) : (
                restProps.children
              )}
            </td>
          );
        }}
      </EditableContext.Consumer>
    );
  }
}

class EditableOrderTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editingKey: '', data: [], searchText: '' };
    this.columns = [
      {
        title: 'No Order',
        dataIndex: 'id',
        dataType: 'text',
        width: '25%',
        editable: true,
        ...this.getColumnSearchProps('id')
      },
      {
        title: 'Customer',
        dataIndex: 'customerName',
        dataType: 'select',
        width: '10%',
        editable: true,
        ...this.getColumnSearchProps('customerName')
      },
      {
        title: 'Contact',
        dataIndex: 'contact',
        dataType: 'text',
        width: '10%',
        editable: true,
        ...this.getColumnSearchProps('contact')
      },
      {
        title: 'Address',
        dataIndex: 'address',
        dataType: 'text',
        width: '10%',
        editable: true,
        ...this.getColumnSearchProps('address')
      },
      {
        title: 'Jenis Tool',
        dataIndex: 'jenisTool',
        dataType: 'text',
        width: '10%',
        editable: true,
        ...this.getColumnSearchProps('jenisTool')
      },
      {
        title: 'PO Number',
        dataIndex: 'poNumber',
        dataType: 'text',
        width: '10%',
        editable: true,
        ...this.getColumnSearchProps('poNumber')
      },
      {
        title: 'Quantity',
        dataIndex: 'toolsId.length',
        dataType: 'text',
        width: '10%',
        editable: true,
        ...this.getColumnSearchProps('toolsId.length')
      },
      {
        title: 'Action',
        dataIndex: 'operation',
        render: (text, record) => {
          const editable = this.isEditing(record);
          return (
            <div>
              {editable ? (
                <span>
                  <EditableContext.Consumer>
                    {form => (
                      <Text
                        onClick={() => this.save(form, record.id)}
                        style={{
                          marginRight: 8,
                          cursor: 'pointer',
                          color: '#40a9ff'
                        }}
                      >
                        {' '}
                        Save
                      </Text>
                    )}
                  </EditableContext.Consumer>
                  <Text
                    onClick={() => this.cancel()}
                    style={{ cursor: 'pointer', color: 'red' }}
                  >
                    {' '}
                    Cancel
                  </Text>
                </span>
              ) : (
                <Text
                  onClick={() => this.edit(record.id)}
                  style={{
                    marginRight: 8,
                    cursor: 'pointer',
                    color: '#40a9ff'
                  }}
                >
                  {' '}
                  Edit
                </Text>
              )}
              {editable ? (
                <span />
              ) : (
                <Text
                  onClick={() => this.delete(record.id)}
                  style={{ cursor: 'pointer', color: 'red' }}
                >
                  {' '}
                  Delete
                </Text>
              )}
            </div>
          );
        }
      }
    ];
  }

  componentDidMount() {
    const token = JSON.parse(localStorage.getItem('jwt')).token;
    fetch('/getallorders', {
      method: 'GET',
      headers: {
        Authorization: 'Bearer ' + token
      }
    })
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          this.setState({
            data: data.message
          });
        } else {
          openNotificationWithIcon('error', 'Gagal mengambil vendor');
        }
      });
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.data !== this.props.data) {
      this.setState({ data: this.props.data });
    }
  }

  isEditing = record => record.id === this.state.editingKey;

  cancel = () => {
    this.setState({ editingKey: '' });
  };

  save = (form, key) => {
    form.validateFields((error, row) => {
      if (error) {
        return;
      }
      const token = JSON.parse(localStorage.getItem('jwt')).token;
      fetch(`/updatejenistool/${key}`, {
        method: 'put',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer ' + token
        },
        body: JSON.stringify(row)
      })
        .then(res => res.json())
        .then(res => {
          if (res.success) {
            let { data } = this.state;
            let newData = data.find(
              updateJenisTool => updateJenisTool.id === res.message.id
            );
            newData.jenis = res.message.jenis;
            newData.lifetime = res.message.lifetime;
            newData.diameter = res.message.diameter;
            newData.panjang = res.message.panjang;
            newData.vendor = res.message.vendor;
            newData.CT = res.message.CT;
            this.setState({
              data: [
                ...this.state.data.filter(value => value.id !== res.message.id),
                newData
              ],
              editingKey: ''
            });
          } else {
            alert('Gagal update jenis tool');
          }
        })
        .catch(err => console.log(err));
    });
  };

  edit = key => {
    this.setState({ editingKey: key });
  };

  delete = key => {
    console.log('key : ', key);
    const token = JSON.parse(localStorage.getItem('jwt')).token;
    fetch(`/deleteorder/${key}`, {
      method: 'delete',
      headers: {
        Authorization: 'Bearer ' + token
      }
    })
      .then(res => res.json())
      .then(res => {
        if (res.success) {
          let newData = this.state.data.filter(
            value => value.id !== res.message.id
          );
          this.setState({
            data: newData
          });
        } else {
          alert('Gagal menghapus jenis tool');
        }
      });
  };

  getColumnSearchProps = dataIndex => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters
    }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={node => {
            this.searchInput = node;
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
          className="search-JT"
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button
          onClick={() => this.handleSearchReset(clearFilters)}
          size="small"
          style={{ width: 90 }}
        >
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
    ),
    onFilter: (value, record) =>
      record[dataIndex]
        .toString()
        .toLowerCase()
        .includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select());
      }
    }
  });

  handleSearch = (selectedKeys, confirm) => {
    confirm();
    this.setState({ searchText: selectedKeys[0] });
  };

  handleSearchReset = clearFilters => {
    clearFilters();
    this.setState({ searchText: '' });
  };

  render() {
    const components = {
      body: {
        cell: EditableCell
      }
    };

    let fullhd = true;

    if (window.innerHeight < 768) {
      fullhd = false;
    }

    const columns = this.columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          inputType: col.dataType,
          dataIndex: col.dataIndex,
          title: col.title,
          editing: this.isEditing(record)
        })
      };
    });

    return (
      <EditableContext.Provider value={this.props.form}>
        <Table
          components={components}
          bordered
          rowKey="id"
          dataSource={this.state.data}
          columns={columns}
          rowClassName="editable-row"
          pagination={{
            defaultPageSize: fullhd ? 13 : 5,
            showSizeChanger: true,
            pageSizeOptions: fullhd ? ['13', '20', '30'] : ['5', '10', '15'],
            onChange: this.cancel
          }}
          scroll={fullhd ? { y: '65vh' } : { y: '40vh' }}
        />
      </EditableContext.Provider>
    );
  }
}

const EditableOrder = Form.create()(EditableOrderTable);

export default EditableOrder;