import React, { Component } from 'react';
import { Col } from "antd"
import { PlusCircleFilled } from '@ant-design/icons';
import AdvanceTable from "components/StationTables";
import HeaderForm from "../components/HeaderForm";
import UploadPriceModal from '../components/UploadPricesModal'
import LocatioModal from '../components/LocationModal'
import moment from 'moment'

class StationLocator extends Component {
  state= {
    updating: false,
    visible: true,
    editModal: false,
    closeLocModal: false,
    uploadPriceModal: false,
    onRemove: '',
    dataLocation: {}
  }

  delete =(admin_uuid)=> {

  }

  edit =(admin_uuid)=> {
  // this.setState({editModal: !this.state.editModal})
  }

  modalVisible = () => {
    this.setState({visible: !this.state.visible})
  }

  closeModal = () => {
  this.setState({visible: false})

  }

  location = (admin_uuid) => {
    this.setState({closeLocModal: !this.state.closeLocModal, dataLocation: {}})
  }

  uploadPrice = () => {
    this.setState({uploadPriceModal: !this.state.uploadPriceModal})
  }

  getLocationData = (data) => {
    console.log(data)
    this.setState({dataLocation: data, closeLocModal: !this.state.closeLocModal})
  }

  render() {
    const { match, history } = this.props;
    return (
      <div style={{border:'1px solid #E6ECF5'}}>
        <HeaderForm
          title="Station List"
          action={()=> history.push({ pathname: `${match.url}/create` })}
          actionBtnName="Upload Prices"
          onClick={()=> this.uploadPrice()}
        />
        <AdvanceTable
          updating = { this.state.updating }
          keyValue="cardtype_uuid"
          url={{
            default: 'location',
            // defaultWithFilter: 'location',
            // filter: '?page=1&page_size=10&_sort_by=create_dt&_sort_order=desc'
          }}
          locationData={this.getLocationData}
          filterValues ={["role", "status"]}
          columns={
            [{
                title: 'Station Code',
                dataIndex: 'code',
                key: 'stationCode',
                // sorter: true,
                filters:[],
              },
              {
              title: 'Station Name',
              dataIndex: 'name',
              key: 'stationName',
              // sorter: true,
              filters:[],
            },
            {
              title: 'Branch Name',
              dataIndex: 'Branch.name',
              key: 'branchName',
              // sorter: true,
              filters:[],
            },
            {
              title: 'Date Created',
              dataIndex: 'createdAt',
              key: 'dateCreated',
              render: value => {
                return <span>{moment(value).format('LLL')}</span>
              },
              // sorter: true,
              filters:[],
            },
            {
              title: 'Created By',
              dataIndex: 'created_by',
              key: 'createdBy',
              // sorter: true,
              filters:[],
            },
            {
              title: 'Modified By',
              dataIndex: 'modified_by',
              key: 'modifiedBy',
              // sorter: true,
              filters:[],
            },
            {
              title: 'Date Modified',
              dataIndex: 'updatedAt',
              render: value => {
                return <span>{moment(value).format('LLL')}</span>
              },
              key: 'dateModified',
              // sorter: true,
              filters:[],
            },
            // {
            //   title: 'Modified By',
            //   dataIndex: 'modifiedBy',
            //   key: 'modifiedBy',
            //   sorter: true,
            //   filters:[],
            // },
            {
              title: 'Action',
              dataIndex: 'action',
              key: 'action',
              width: 100,
              buttons: [
                {
                  key: 'location',
                  title: "Location",
                  icon: 'environment',
                  url: '',
                  action: this.location
                },
                {
                  key: 'edit',
                  title: "Edit",
                  icon: 'form',
                  url: '',
                  action: this.edit
                },
                {
                  key: 'delete',
                  title: "Delete",
                  icon: 'delete',
                  url: '',
                  action: this.delete,
                }
              ]
            }]
          }
        />
        <Col style={{position: 'fixed', right: '10px', bottom: '30px'}}>
          <PlusCircleFilled onClick={()=> history.push({ pathname: `${match.url}/create` })} style={{fontSize: '50px', color: 'green', backgroundColor: 'white'}}/>
        </Col>
        <UploadPriceModal visible={this.state.uploadPriceModal} cancel={this.uploadPrice }  />
        <LocatioModal data={this.state.dataLocation} visible={this.state.closeLocModal} cancel={this.location} />
      </div>
    );
  }
}

export default StationLocator;