text: import React, { Component } from 'react';
  import {
    Card,
    CardBody,
    Col,
    Row
  } from 'reactstrap';
  
  import axios from 'axios';
  
  import { toast } from 'react-toastify';
  
  import CustomTable from '../../../Components/CustomTable/CustomTable';
  import Edit from '../../../Components/CustomModal/Edit';
  
  class Membership extends Component {
    constructor() {
      super();
      this.state = {
        loading: false,
        listview_data: [],
        pages: -1,
        limit: 10,
        form_data: {}
      }
    }
  
    get_listview = (state, instance, customFilter = []) => {
      this.setState({
        loading: true,
        get_listview: {
          state,
          instance
        }
      });
  
      let params = {
        limit: state.pageSize,
        page: (parseInt(state.page) + 1)
      }
  
      Object.keys(customFilter).map(v => {
        params[v] = customFilter[v];
        return true;
      })
  
      state.filtered.map((filter) => {
        params[filter.id] = filter.value
        return true
      })
  
      axios({
        method: 'GET',
        baseURL: this.props.variables.api_url,
        url: 'api/v1/cms/get-all-membership',
        params,
        headers: {
          "Content-Type": "application/json",
          "Authorization": "Bearer " + this.props.userData.access_token
        }
      }).then((response) => {
        this.props.processResponse(response).then((result) => {
          let listview_data = [];
  
          let no = parseInt(result.data.data.from);
          result.data.data.lists.map((v) => {
            listview_data.push({
              no,
              id: v.id,
              nama_maindealer: v.maindealer ? v.maindealer.name : '',
              name_card: v.name_card,
              benefit: <button
                className="btn btn-link" onClick={() => {
                  this.setState({ loading: true });
                  Promise.all([
                    this.get_benefit(v.id)
                  ]).then(() => {
                    this.setState({
                      modal_benefit: true,
                      loading: false
                    })
                  })
                }}>
                Cek Benefit
              </button>,
              merchan: <button
                className="btn btn-link" onClick={() => {
                  this.setState({ loading: true });
                  Promise.all([
                    this.get_merchant(v.id)
                  ]).then(() => {
                    this.setState({
                      modal_merchant: true,
                      loading: false
                    })
                  })
                }}>
                Cek Merchan
                </button>
            });
            no++;
            return true;
          });
  
          this.setState({
            loading: false,
            pages: result.data.data.last_page,
            limit: result.data.data.per_page,
            listview_data
          })
        }, (error) => {
          this.setState({
            loading: false
          }, () => {
            toast(error, {
              className: 'bg-danger text-white'
            })
          });
        })
      }, (error) => {
        this.setState({
          loading: false
        }, () => {
          toast(error.message, {
            className: 'bg-danger text-white'
          })
        });
      })
    }
  
    get_benefit = (id) => axios({
      method: 'POST',
      baseURL: this.props.variables.api_url,
      url: 'api/v1/cms/get-benefit-membership',
      headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer " + this.props.userData.access_token
      },
      data: { id }
    }).then((response) => {
      this.props.processResponse(response).then((result) => {
        const form_data = {
          id,
          benefit: result.data.data
        }
  
        this.setState({
          form_data
        })
      }, (error) => {
        toast(error, {
          className: 'bg-danger text-white'
        })
      })
    }, (error) => {
      toast(error.message, {
        className: 'bg-danger text-white'
      })
    })
  
    update_benefit = (data) => {
      this.setState({
        loading: true
      });
  
      axios({
        method: 'POST',
        baseURL: this.props.variables.api_url,
        url: 'api/v1/cms/update-benefit-membership',
        headers: {
          "Content-Type": "application/json",
          "Authorization": "Bearer " + this.props.userData.access_token
        },
        data
      }).then((response) => {
        this.props.processResponse(response).then((result) => {
          this.setState({
            loading: false,
            modal_benefit: false
          }, () => {
            toast('Success', {
              className: 'bg-success text-white'
            });
            this.get_listview(this.state.get_listview.state, this.state.get_listview.instance);
          })
        }, (error) => {
          this.setState({
            loading: false
          }, () => {
            toast(error, {
              className: 'bg-danger text-white'
            })
          });
        })
      }, (error) => {
        this.setState({
          loading: false
        }, () => {
          toast(error.message, {
            className: 'bg-danger text-white'
          });
          this.get_listview(this.state.get_listview.state, this.state.get_listview.instance);
        });
      })
    }
  
    get_merchant = (id) => axios({
      method: 'POST',
      baseURL: this.props.variables.api_url,
      url: 'api/v1/cms/get-merchant-membership',
      headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer " + this.props.userData.access_token
      },
      data: { id }
    }).then((response) => {
      this.props.processResponse(response).then((result) => {
        const form_data = {
          id,
          merchant: result.data.data
        }
  
        this.setState({
          form_data
        })
      }, (error) => {
        toast(error, {
          className: 'bg-danger text-white'
        })
      })
    }, (error) => {
      toast(error.message, {
        className: 'bg-danger text-white'
      })
    })
  
    update_merchant = (data) => {
      this.setState({
        loading: true
      });
  
      axios({
        method: 'POST',
        baseURL: this.props.variables.api_url,
        url: 'api/v1/cms/update-merchant-membership',
        headers: {
          "Content-Type": "application/json",
          "Authorization": "Bearer " + this.props.userData.access_token
        },
        data
      }).then((response) => {
        this.props.processResponse(response).then((result) => {
          this.setState({
            loading: false,
            modal_merchant: false
          }, () => {
            toast('Success', {
              className: 'bg-success text-white'
            });
            this.get_listview(this.state.get_listview.state, this.state.get_listview.instance);
          })
        }, (error) => {
          this.setState({
            loading: false
          }, () => {
            toast(error, {
              className: 'bg-danger text-white'
            })
          });
        })
      }, (error) => {
        this.setState({
          loading: false
        }, () => {
          toast(error.message, {
            className: 'bg-danger text-white'
          });
          this.get_listview(this.state.get_listview.state, this.state.get_listview.instance);
        });
      })
    }
  
    delete = (id) => {
      this.setState({
        loading: true
      });
  
      axios({
        method: 'POST',
        baseURL: this.props.variables.api_url,
        url: 'api/v1/cms/delete-membership-data',
        headers: {
          "Content-Type": "application/json",
          "Authorization": "Bearer " + this.props.userData.access_token
        },
        data: { id }
      }).then((response) => {
        this.props.processResponse(response).then((result) => {
          this.setState({
            loading: false
          }, () => {
            toast('Success', {
              className: 'bg-success text-white'
            });
            this.get_listview(this.state.get_listview.state, this.state.get_listview.instance);
          })
        }, (error) => {
          this.setState({
            loading: false
          }, () => {
            toast(error, {
              className: 'bg-danger text-white'
            })
          });
        })
      }, (error) => {
        this.setState({
          loading: false
        }, () => {
          toast(error.message, {
            className: 'bg-danger text-white'
          })
        });
      })
    }
  
    render() {
      return (
        <div className="animated fadeIn">
          <Row>
            <Col xs="12">
              <Card>
                <CardBody>
                  <CustomTable
                    {...this.props}
                    // filterByDate
                    buttons={[
                      {
                        type: 'upload',
                        url: 'api/v1/cms/upload-membership',
                        name: 'membership',
                        access: [1, 2]
                      }
                    ]}
                    action={[
                      {
                        name: 'delete',
                        access: [1, 2],
                        onClick: (e) => {
                          this.delete(e.id)
                        }
                      }
                    ]}
                    // props from ReactTable
                    columns={[
                      {
                        Header: 'No',
                        accessor: 'no'
                      }, {
                        Header: 'Nama Maindealer',
                        accessor: 'nama_maindealer'
                      }, {
                        Header: 'Nama Kartu',
                        accessor: 'name_card',
                        filterable: true
                      }, {
                        Header: 'Benefit',
                        accessor: 'benefit'
                      }, {
                        Header: 'Merchan',
                        accessor: 'merchan'
                      }, {
                        Header: 'Aksi',
                        accessor: 'aksi'
                      }
                    ]}
                    data={this.state.listview_data}
                    onFetchData={this.get_listview} // Receive 3 params ( state, instance, customFilter )
                    pages={this.state.pages}
                    defaultPageSize={this.state.limit}
                    loading={this.state.loading}
                  />
                </CardBody>
              </Card>
            </Col>
          </Row>
  
          <Edit
            loading={this.state.loading}
            isOpen={this.state.modal_benefit}
            onUpdate={this.update_benefit}
            inputs={[
              {
                type: 'hidden',
                value: this.state.form_data.id,
                name: 'id'
              },
              {
                type: 'textarea',
                value: this.state.form_data.benefit,
                name: 'benefit',
                label: 'Benefit',
                col: 12
              }
            ]}
            afterClose={() => {
              this.setState({
                modal_benefit: false
              })
            }}
          />
  
          <Edit
            loading={this.state.loading}
            isOpen={this.state.modal_merchant}
            onUpdate={this.update_merchant}
            inputs={[
              {
                type: 'hidden',
                value: this.state.form_data.id,
                name: 'id'
              },
              {
                type: 'textarea',
                value: this.state.form_data.merchant,
                name: 'merchant',
                label: 'Merchant',
                col: 12
              }
            ]}
            afterClose={() => {
              this.setState({
                modal_merchant: false
              })
            }}
          />
        </div>
      );
    }
  }
  
  export default Membership;
  