text: import React, { Component } from 'react'
  import { Button, Card, CardBody, Col, Row } from 'reactstrap'
  import ReactTable from 'react-table'
  import 'react-table/react-table.css'
  import PropTypes from 'prop-types'
  import { connect } from 'react-redux'
  import { Redirect } from 'react-router-dom'
  // import { Formik, Form, Field } from 'formik'
  import Select from 'react-select'
  import Service from '../../../config/services'
  // import { CfInput, CfSelect } from '../../../components'
  import { AlertMessage, formatDate, invalidValues, queryStringToJSON } from '../../../helpers'
  import { createAsset, updateAsset, deleteAsset } from '../../../modules/asset/actions'
  import withTableFetchQuery, { WithTableFetchQueryProp } from '../../../HOC/withTableFetchQuery'
  import withToggle, { WithToggleProps } from '../../../HOC/withToggle'
  
  class BelumBerjalan extends Component {
    state = {
      kondisiAsetId: '',
      optKondisiAset: [
        { label: 'All', value: '' },
        { label: 'Financial Admin', value: 'Financial Admin' },
        { label: 'Procurement', value: 'Procurement' },
        { label: 'Fixed Asset', value: 'Fixed Asset' },
        { label: 'General Affair', value: 'General Affair' },
      ],
    }
  
    initialValues = {}
  
    componentDidMount() {
      const { location } = this.props
      const query = queryStringToJSON(location.search)
      const { date, monthYear } = query
      const { fetchQueryProps } = this.props
  
      if (date) {
        fetchQueryProps.setFilteredByObject({
          status: 'Belum Berjalan',
          atDate$createdAt: date,
          'month-year$createdAt': '',
        })
      } else if (monthYear) {
        fetchQueryProps.setFilteredByObject({
          status: 'Belum Berjalan',
          atDate$createdAt: '',
          'month-year$createdAt': monthYear,
        })
      } else {
        fetchQueryProps.setFilteredByObject({
          status: 'Belum Berjalan',
          atDate$createdAt: '',
          'month-year$createdAt': '',
        })
      }
    }
  
    doRefresh = () => {
      const { fetchQueryProps, modalForm } = this.props
      modalForm.hide()
      fetchQueryProps.refresh()
    }
  
    handleSaveChanges = (values) => {
      const { id } = values
      const { createAsset, updateAsset } = this.props
      if (!invalidValues.includes(id)) {
        updateAsset(values, id, this.doRefresh)
      } else {
        createAsset(values, this.doRefresh)
      }
    }
  
    handleChangeSelect = (name, value) => {
      const { fetchQueryProps } = this.props
      fetchQueryProps.setFilteredByObject({
        seksi: value.value,
      })
      this.setState(
        {
          [name]: value,
        },
        () => {
          this.doRefresh()
        }
      )
    }
  
    onClickApprove = async (id) => {
      const field = {
        title: 'Apa kamu yakin?',
        text: 'Setelah Approve, Kamu tidak dapat memulihkan data ini!',
        confirmButtonText: 'Ya, Setuju!',
        cancelButtonText: 'Kembali',
      }
  
      AlertMessage.warning(field)
        .then(async (result) => {
          if (result.value) {
            await Service.approveProcessFinancialAdmin(id).then((res) => {
              if (res.data) {
                AlertMessage.success('', 'Pengadaan Behasil Disetujui!')
                this.doRefresh()
              }
            })
          }
        })
        .catch((err) => {
          // Internal Server Error
          AlertMessage.error(err)
        })
    }
  
    // handleDelete = (e, state) => {
    //   e.preventDefault()
  
    //   const { id } = state
    //   const { deleteDelete } = this.props
  
    //   AlertMessage.warning()
    //     .then((result) => {
    //       if (result.value) {
    //         console.log('delete object', id)
    //         deleteDelete(id, this.doRefresh)
    //       } else {
    //         const paramsResponse = {
    //           title: 'Huff',
    //           text: 'Hampir saja kamu kehilangan data ini',
    //         }
    //         AlertMessage.info(paramsResponse)
    //       }
    //     })
    //     .catch((err) => {
    //       AlertMessage.error(err) // Internal Server Error
    //     })
    // }
  
    render() {
      const { optKondisiAset, kondisiAsetId } = this.state
      const { auth, fetchQueryProps } = this.props
      const { tableProps } = fetchQueryProps
  
      // const numbData = (props) => tableProps.pageSize * tableProps.page + props.index + 1
  
      const columns = [
        {
          Header: 'Tanggal',
          accessor: 'tanggal',
          filterable: false,
          headerClassName: 'wordwrap',
          Cell: (row) => <div style={{ textAlign: 'center' }}>{formatDate(row.value)}</div>,
        },
        {
          Header: 'Kegiatan',
          accessor: 'kegiatan',
          filterable: false,
          headerClassName: 'wordwrap',
          Cell: (row) => <div style={{ textAlign: 'center' }}>{row.value}</div>,
        },
        {
          Header: 'Seksi',
          accessor: 'seksi',
          filterable: false,
          headerClassName: 'wordwrap',
          Cell: (row) => <div style={{ textAlign: 'center' }}>{row.value}</div>,
        },
        {
          Header: 'Izin Prinsip Pengadaan',
          accessor: 'izinPrinsipPengadaan',
          filterable: false,
          headerClassName: 'wordwrap',
  
          Cell: (props) =>
            props.value ? (
              <div className="text-center">
                <i className="icon-check text-success" style={{ fontSize: '25px' }} />
              </div>
            ) : (
              <div className="text-center">
                <i className="icon-close text-danger" style={{ fontSize: '25px' }} />
              </div>
            ),
        },
        {
          Header: 'KTP / NPWP',
          accessor: 'ktpAtauNpwp',
          filterable: false,
          headerClassName: 'wordwrap',
  
          Cell: (props) =>
            props.value ? (
              <div className="text-center">
                <i className="icon-check text-success" style={{ fontSize: '25px' }} />
              </div>
            ) : (
              <div className="text-center">
                <i className="icon-close text-danger" style={{ fontSize: '25px' }} />
              </div>
            ),
        },
        {
          Header: 'Faktur Pajak',
          accessor: 'fakturPajak',
          filterable: false,
          headerClassName: 'wordwrap',
  
          Cell: (props) =>
            props.value ? (
              <div className="text-center">
                <i className="icon-check text-success" style={{ fontSize: '25px' }} />
              </div>
            ) : (
              <div className="text-center">
                <i className="icon-close text-danger" style={{ fontSize: '25px' }} />
              </div>
            ),
        },
        {
          Header: 'Surat Pemesanan',
          accessor: 'suratPemesanan',
          filterable: false,
          headerClassName: 'wordwrap',
  
          Cell: (props) =>
            props.value ? (
              <div className="text-center">
                <i className="icon-check text-success" style={{ fontSize: '25px' }} />
              </div>
            ) : (
              <div className="text-center">
                <i className="icon-close text-danger" style={{ fontSize: '25px' }} />
              </div>
            ),
        },
        {
          Header: 'Nota Pembukuan',
          accessor: 'notaPembukuan',
          filterable: false,
          headerClassName: 'wordwrap',
  
          Cell: (props) =>
            props.value ? (
              <div className="text-center">
                <i className="icon-check text-success" style={{ fontSize: '25px' }} />
              </div>
            ) : (
              <div className="text-center">
                <i className="icon-close text-danger" style={{ fontSize: '25px' }} />
              </div>
            ),
        },
        {
          Header: 'Proposal Penawaran',
          accessor: 'proposalPenawaran',
          filterable: false,
          Cell: (props) =>
            props.value ? (
              <div className="text-center">
                <i className="icon-check text-success" style={{ fontSize: '25px' }} />
              </div>
            ) : (
              <div className="text-center">
                <i className="icon-close text-danger" style={{ fontSize: '25px' }} />
              </div>
            ),
        },
        {
          Header: 'Undangan',
          accessor: 'undangan',
          filterable: false,
          Cell: (props) =>
            props.value ? (
              <div className="text-center">
                <i className="icon-check text-success" style={{ fontSize: '25px' }} />
              </div>
            ) : (
              <div className="text-center">
                <i className="icon-close text-danger" style={{ fontSize: '25px' }} />
              </div>
            ),
        },
        {
          Header: 'Invoice Bermaterai',
          accessor: 'invoiceBermateraiKwitansi',
          filterable: false,
          headerClassName: 'wordwrap',
  
          Cell: (props) =>
            props.value ? (
              <div className="text-center">
                <i className="icon-check text-success" style={{ fontSize: '25px' }} />
              </div>
            ) : (
              <div className="text-center">
                <i className="icon-close text-danger" style={{ fontSize: '25px' }} />
              </div>
            ),
        },
        {
          Header: 'Tipe Payment',
          accessor: 'typePayment',
          filterable: false,
          headerClassName: 'wordwrap',
          Cell: (row) => <div style={{ textAlign: 'center' }}>{row.value}</div>,
        },
        {
          Header: 'Tipe Pendidikan',
          accessor: 'typePendidikan',
          filterable: false,
          headerClassName: 'wordwrap',
          Cell: (row) => <div style={{ textAlign: 'center' }}>{row.value}</div>,
        },
        {
          Header: 'Nama Pendidikan',
          accessor: 'namaPendidikan',
          filterable: false,
          headerClassName: 'wordwrap',
          Cell: (row) => <div style={{ textAlign: 'center' }}>{row.value}</div>,
        },
        {
          Header: 'Jumlah Peserta',
          accessor: 'jumlah',
          filterable: false,
          headerClassName: 'wordwrap',
          Cell: (row) => <div style={{ textAlign: 'center' }}>{row.value}</div>,
        },
        {
          Header: 'Durasi',
          accessor: 'durasi',
          filterable: false,
          headerClassName: 'wordwrap',
          Cell: (row) => <div style={{ textAlign: 'center' }}>{row.value}</div>,
        },
        {
          Header: 'Jumlah Biaya',
          accessor: 'jumlahBiaya',
          filterable: false,
          headerClassName: 'wordwrap',
          Cell: (row) => <div style={{ textAlign: 'center' }}>{row.value}</div>,
        },
        {
          Header: 'Keterangan',
          accessor: 'information',
          filterable: false,
          headerClassName: 'wordwrap',
          Cell: (row) => <div style={{ textAlign: 'center' }}>{row.value}</div>,
        },
        {
          Header: 'Status',
          width: 200,
          accessor: 'status',
          filterable: false,
          headerClassName: 'wordwrap',
          Cell: (row) => <div style={{ textAlign: 'center' }}>{row.value}</div>,
        },
        {
          Header: 'Aksi',
          accessor: 'id',
          width: 200,
          filterable: false,
          Cell: (props) => (
            <>
              <Button
                color="success"
                onClick={() => this.onClickApprove(props.value)}
                className="mr-1"
                title="Edit"
              >
                Approve
              </Button>
              &nbsp; | &nbsp;
              <Button
                color="danger"
                // onClick={(e) => this.handleDelete(e, props.original)}
                className="mr-1"
                title="Delete"
              >
                Deny
              </Button>
            </>
          ),
        },
      ]
  
      // const pageName = 'Kondisi Aset'
      // const isIcon = { paddingRight: '7px' }
  
      if (!auth) return <Redirect to="/login" />
  
      return (
        <div className="animated fadeIn">
          <Row>
            <Col xs="12">
              <Card>
                <CardBody>
                  <Row>
                    <Col sm="4">
                      <Select
                        // isClearable
                        onChange={(v) => this.handleChangeSelect('kondisiAsetId', v)}
                        options={optKondisiAset}
                        value={kondisiAsetId}
                        className="basic-single"
                        classNamePrefix="select"
                        placeholder="Kegiatan Belum Berjalan"
                      />
                    </Col>
                  </Row>
                  <br />
                  <ReactTable
                    filterable
                    columns={columns}
                    defaultPageSize={10}
                    className="-highlight"
                    {...tableProps}
                  />
                </CardBody>
              </Card>
            </Col>
          </Row>
        </div>
      )
    }
  }
  
  BelumBerjalan.propTypes = {
    auth: PropTypes.bool.isRequired,
    isLoading: PropTypes.bool,
    message: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
    className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
    location: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
    createAsset: PropTypes.func.isRequired,
    updateAsset: PropTypes.func.isRequired,
    deleteAsset: PropTypes.func.isRequired,
    fetchQueryProps: WithTableFetchQueryProp,
    modalForm: WithToggleProps,
  }
  
  const mapStateToProps = (state) => ({
    auth: state.auth.authenticated,
    isLoading: state.role.isLoading,
    message: state.role.message,
  })
  
  const mapDispatchToProps = (dispatch) => ({
    createAsset: (formData, refresh) => dispatch(createAsset(formData, refresh)),
    updateAsset: (formData, id, refresh) => dispatch(updateAsset(formData, id, refresh)),
    deleteAsset: (id, refresh) => dispatch(deleteAsset(id, refresh)),
  })
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(
    withTableFetchQuery({
      API: (p) => Service.getFullFinancialAdmin(p),
      Component: withToggle({
        Component: BelumBerjalan,
        toggles: {
          modalForm: false,
        },
      }),
    })
  )
  