import React, { useEffect, useState, useRef } from 'react'
import { Modal } from 'react-bootstrap'
import DataTable from 'react-data-table-component'
import ErrorLogService from '../../../services/ErrorLogService'
import CountryService from '../../../services/MastersService/CountryService'
import ManageMenuService from '../../../services/MenuManagementService/ManageMenuService'
import PageHeader from '../../../components/Common/PageHeader'
import Select from 'react-select'
import { Astrick } from '../../../components/Utilities/Style'
import * as Validation from '../../../components/Utilities/Validation'
import Alert from '../../../components/Common/Alert'
import { ExportToExcel } from '../../../components/Utilities/Table/ExportToExcel'

function CountryComponent() {
  const [data, setData] = useState(null)
  const [notify, setNotify] = useState()
  const [modal, setModal] = useState({
    showModal: false,
    modalData: '',
    modalHeader: '',
  })
  const [exportData, setExportData] = useState(null)

  const roleId = sessionStorage.getItem("role_id")
  const [checkRole, setCheckRole] = useState(null)


  const handleModal = (data) => {
    setModal(data)
  }

  // const searchRef = useRef()
  // const handleSearch = () => {
  //   const search = searchRef.current.value;
  //   if (search.length > 0) {
  //     const temp = data.filter((d) => {
  //       return d.country.toLowerCase().match(new RegExp(search.toLowerCase(), 'g'))
  //     })
  //     setData(temp)
  //     const exportTempData = []
  //     for (const key in temp) {
  //       exportTempData.push({
  //         Sr: temp[key].counter,
  //         Country: temp[key].country,
  //         Status: temp[key].is_active ? 'Active' : 'Deactive',
  //         created_at:temp[key].created_at,
  //         created_by:temp[key].created_by,
  //         updated_at: temp[key].updated_at,
  //         updated_by: temp[key].updated_by,
  //       })
  //     }

  //     setExportData(null)
  //     setExportData(exportTempData)
  //   } else {
  //     // setNotify(null)
  //     // setNotify({ type: 'danger', message: 'Please Search Country Name' })
  //     alert("Please Search Country Name")
  //   }
  // }

  const columns = [
    {
      name: 'Action',
      selector: (row) => { },
      sortable: false, width: "100px",
      cell: (row) => (
        <div
          className="btn-group"
          role="group"
          aria-label="Basic outlined example"
        >
          <button
            type="button"
            className="btn btn-outline-secondary"
            data-bs-toggle="modal"
            data-bs-target="#depedit"
            onClick={(e) => {
              handleModal({
                showModal: true,
                modalData: row,
                modalHeader: 'Edit Country',
              })
            }}
          >
            <i className="icofont-edit text-success"></i>
          </button>
        </div>
      ),
    },
    { name: 'Sr', selector: (row) => row.counter, sortable: true, width: "60px" },
    { name: 'Country', selector: (row) => row.country, sortable: true },
    {
      name: 'Status',
      selector: (row) => row.is_active,
      sortable: true,
      cell: (row) => (
        <div>
          {row.is_active === 1 && (
            <span className="badge bg-primary">Active</span>
          )}
          {row.is_active === 0 && (
            <span className="badge bg-danger">Deactive</span>
          )}
        </div>
      ),
    },
    { name: 'Created At', selector: (row) => row.created_at, sortable: true, width: "200px" },
    { name: 'Created By', selector: (row) => row.created_by, sortable: true },
    { name: 'Updated At', selector: (row) => row.updated_at, sortable: true },
    { name: 'Updated By', selector: (row) => row.updated_by, sortable: true },
  ]

  const loadData = async () => {
    const data = []
    const exportTempData = []
    await new CountryService().getCountry().then((res) => {
      console.log(res)
      if (res.status === 200) {
        let counter = 1
        const temp = res.data.data
        for (const key in temp) {
          data.push({
            counter: counter++,
            id: temp[key].id,
            country: temp[key].country,
            is_active: temp[key].is_active,
            remark: temp[key].remark,
            created_at: temp[key].created_at,
            created_by: temp[key].created_by,
            updated_at: temp[key].updated_at,
            updated_by: temp[key].updated_by,
          })
        }

        setData(null)
        setData(data)

        for (const key in data) {
          exportTempData.push({
            Sr: data[key].counter,
            Country: data[key].country,
            Status: data[key].is_active ? 'Active' : 'Deactive',
            created_at: temp[key].created_at,
            created_by: temp[key].created_by,
            updated_at: data[key].updated_at,
            updated_by: data[key].updated_by,
          })
        }

        setExportData(null)
        setExportData(exportTempData)
      }
    })
      .catch((error) => {
        const { response } = error
        const { request, ...errorObject } = response
        new ErrorLogService().sendErrorLog(
          'Country',
          'Get_Country',
          'INSERT',
          errorObject.data.message,
        )
      })

    await new ManageMenuService().getRole(roleId).then((res) => {
      if (res.status === 200) {
        if (res.data.status == 1) {
          const getRoleId = sessionStorage.getItem("role_id");
          setCheckRole(res.data.data.filter(d => d.role_id == getRoleId))

        }
      }
    })
  }

  const handleForm = (id) => async (e) => {
    e.preventDefault()
    const form = new FormData(e.target)
    setNotify(null)
    if (!id) {
      await new CountryService()
        .postCountry(form)
        .then((res) => {
          console.log(res)
          if (res.status === 200) {
            if (res.data.status === 1) {
              setNotify({ type: 'success', message: res.data.message })
              setModal({ showModal: false, modalData: '', modalHeader: '' })
              loadData()
            } else {
              setNotify({ type: 'danger', message: res.data.message })
            }
          } else {
            setNotify({ type: 'danger', message: res.data.message })
            new ErrorLogService().sendErrorLog(
              'Country',
              'Create_Country',
              'INSERT',
              res.message,
            )
          }
        })
        .catch((error) => {
          const { response } = error
          const { request, ...errorObject } = response
          setNotify({ type: 'danger', message: 'Request Error !!!' })
          new ErrorLogService().sendErrorLog(
            'Country',
            'Create_Country',
            'INSERT',
            errorObject.data.message,
          )
        })
    } else {
      await new CountryService()
        .updateCountry(id, form)
        .then((res) => {
          if (res.status === 200) {
            if (res.data.status === 1) {
              setNotify({ type: 'success', message: res.data.message })
              setModal({ showModal: false, modalData: '', modalHeader: '' })
              loadData()
            } else {
              setNotify({ type: 'danger', message: res.data.message })
            }
          } else {
            setNotify({ type: 'danger', message: res.data.message })
            new ErrorLogService().sendErrorLog(
              'Country',
              'Create_Country',
              'INSERT',
              res.message,
            )
          }
        })
        .catch((error) => {
          const { response } = error
          const { request, ...errorObject } = response
          setNotify({ type: 'danger', message: 'Request Error !!!' })
          new ErrorLogService().sendErrorLog(
            'Country',
            'Create_Country',
            'INSERT',
            errorObject.data.message,
          )
        })
    }
  }

  // //Search As Enter key press
  // useEffect(() => {
  //   const listener = event => {
  //     if (event.code === "Enter") {
  //       console.log("Enter key was pressed. Run your function.");
  //       // callMyFunction();
  //       handleSearch()
  //     }
  //   };
  //   document.addEventListener("keydown", listener);
  //   return () => {
  //     document.removeEventListener("keydown", listener);
  //   };
  // }, [data]);

  //  const handleKeyDown = (event) => {
  //     if (event.key === 'Enter') {
  //       handleSearch()
  //     }
  //   };

  const [search, setSearch] = useState(null)

  useEffect(() => {
    const searchData = data && data.filter((d) => {
      // return (d.country ? d.country :"").toLowerCase().match(search.toLowerCase())
      return d.country.toLowerCase().match(search.toLowerCase())
    })
    console.log(searchData)
    setData(searchData)
  }, [search])

  useEffect(() => {
    loadData()
  }, [])

  return (
    <div className="container-xxl">
      {notify && <Alert alertData={notify} />}
      <PageHeader
        headerTitle="Country Master"
        renderRight={() => {
          return (
            <div className="col-auto d-flex w-sm-100">
              {checkRole && checkRole[4].can_create == 1 ?
                <button
                  className="btn btn-dark btn-set-task w-sm-100"
                  onClick={() => {
                    handleModal({
                      showModal: true,
                      modalData: null,
                      modalHeader: 'Add Country',
                    })
                  }}
                >
                  <i className="icofont-plus-circle me-2 fs-6"></i>Add Country
                </button> : ""}
            </div>
          )
        }}
      />

      {/* <div className="card card-body">
        <div className="row">
          <div className="col-md-9">
            <input
              type="text"
              className="form-control"
              placeholder="Search...."
              ref={searchRef}
              onKeyDown={handleKeyDown}
            />
          </div>
          <div className="col-md-3">
            <button
              className="btn btn-sm btn-warning text-white"
              type="button"
              onClick={handleSearch}
              style={{ marginTop: '0px', fontWeight: '600' }}
            >
              <i className="icofont-search-1 "></i> Search
            </button>
            <button
              className="btn btn-sm btn-info text-white"
              type="button"
              onClick={() => window.location.reload(false)}
              style={{ marginTop: '0px', fontWeight: '600' }}
            >
              <i className="icofont-refresh text-white"></i> Reset
            </button>
            <ExportToExcel
              className="btn btn-sm btn-danger"
              apiData={exportData}
              fileName="Country master Records"
            />
          </div>
        </div>
      </div> */}

      <div className="card mt-2">
        <div className="card-body">
          <div className="row clearfix g-3">
            <div className="col-sm-12">
              {data && (
                <DataTable
                  columns={columns}
                  data={data}
                  defaultSortField="title"
                  pagination
                  selectableRows={false}
                  className="table myDataTable table-hover align-middle mb-0 d-row nowrap dataTable no-footer dtr-inline"
                  highlightOnHover={true}
                  subHeader
                  subHeaderComponent={
                    <input
                      type="text"
                      className="w-25 form-control"
                      placeholder="Search...."
                      value={search}
                      onChange={(e) => setSearch(e.target.value)}
                    />
                  }
                 
                  actions={
                    <div className="d-inline">
                      <button
                        className="btn btn-sm btn-info text-white"
                        type="button"
                        onClick={() => window.location.reload(false)}
                        style={{ marginTop: '0px', fontWeight: '600' }}
                      >
                        <i className="icofont-refresh text-white"></i> Reset
                      </button>
                      <ExportToExcel
                        className="btn btn-sm btn-danger"
                        apiData={exportData}
                        fileName="Country master Records"
                      />
                    </div>
                  }
                />
              )}
            </div>
          </div>
        </div>
      </div>

      <Modal
        centered
        show={modal.showModal}
        onHide={(e) => {
          handleModal({
            showModal: false,
            modalData: '',
            modalHeader: '',
          })
        }}
      >
        <form
          method="post"
          onSubmit={handleForm(modal.modalData ? modal.modalData.id : '')}
        >
          <Modal.Header closeButton>
            <Modal.Title className="fw-bold">{modal.modalHeader}</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div className="deadline-form">
              <div className="row g-3 mb-3">
                <div className="col-sm-12">
                  <label className="form-label font-weight-bold">
                    Country Name :<Astrick color="red" size="13px" />
                  </label>
                  <input
                    type="text"
                    className="form-control form-control-sm"
                    id="country"
                    name="country"
                    maxLength={25}
                    required
                    defaultValue={
                      modal.modalData ? modal.modalData.country : ''
                    }
                    onKeyPress={(e) => { Validation.CharacterWithSpace(e) }}
                    onPaste={(e) => {
                      e.preventDefault()
                      return false;
                    }} onCopy={(e) => {
                      e.preventDefault()
                      return false;
                    }}
                  />
                </div>
                <div className="col-sm-12">
                  <label className="form-label font-weight-bold">
                    Remark :
                  </label>
                  <input
                    type="text"
                    className="form-control form-control-sm"
                    id="remark"
                    name="remark"
                    maxLength={50}
                    defaultValue={modal.modalData ? modal.modalData.remark : ''}

                  />
                </div>

                {modal.modalData &&
                  <div className="col-sm-12">
                    <label className="form-label font-weight-bold">
                      Status :<Astrick color="red" size="13px" />
                    </label>
                    <div className="row">
                      <div className="col-md-2">
                        <div className="form-check">
                          <input
                            className="form-check-input"
                            type="radio"
                            name="is_active"
                            id="is_active_1"
                            value="1"
                            defaultChecked={modal.modalData && modal.modalData.is_active === 1 ? true : !modal.modalData ? true : false}
                          />
                          <label
                            className="form-check-label"
                            htmlFor="is_active_1"
                          >
                            Active
                          </label>
                        </div>
                      </div>
                      <div className="col-md-1">
                        <div className="form-check">
                          <input
                            className="form-check-input"
                            type="radio"
                            name="is_active"
                            id="is_active_0"
                            value="0"
                            readOnly={modal.modalData ? false : true}
                            defaultChecked={
                              modal.modalData && modal.modalData.is_active === 0
                                ? true
                                : false
                            }
                          />
                          <label
                            className="form-check-label"
                            htmlFor="is_active_0"
                          >
                            Deactive
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>

                }

              </div>
            </div>
          </Modal.Body>
          <Modal.Footer>
            {!modal.modalData && (
              <button
                type="submit"
                className="btn btn-primary text-white"
                style={{ backgroundColor: '#484C7F' }}
              >
                Add
              </button>
            )}
            {modal.modalData && checkRole && checkRole[4].can_update == 1 ? (
              <button
                type="submit"
                className="btn btn-primary text-white"
                style={{ backgroundColor: '#484C7F' }}
              >
                Update
              </button>
            ) : ""}
            <button
              type="button"
              className="btn btn-danger text-white"
              onClick={() => {
                handleModal({
                  showModal: false,
                  modalData: '',
                  modalHeader: '',
                })
              }}
            >
              Cancel
            </button>
          </Modal.Footer>
        </form>
      </Modal>
    </div>
  )
}

function CountryDropdown(props) {
  const [data, setData] = useState(null)
  useEffect(async () => {
    const tempData = []
    await new CountryService().getCountry().then((res) => {
      if (res.status === 200) {
        let counter = 1
        const data = res.data.data
        for (const key in data) {
          if (data[key].is_active == 1) {
            tempData.push({
              id: data[key].id,
              country: data[key].country,
            })
          }
        }
        setData(tempData)
      }
    })
  }, [])

  return (
    <>
      {data && (
        <select
          className="form-control form-control-sm"
          id={props.id}
          name={props.name}
          onChange={props.getChangeValue}
          required={props.required ? true : false}
        >
          {props.defaultValue == 0 && (
            <option value={0} selected>
              Select Country
            </option>
          )}
          {props.defaultValue != 0 && <option value={0}>Select Country</option>}
          {data.map(function (item, i) {
            if (props.defaultValue && props.defaultValue == item.id) {
              return (
                <option key={i} value={item.id} selected>
                  {item.country}
                </option>
              )
            } else {
              return (
                <option key={i} value={item.id}>
                  {item.country}
                </option>
              )
            }
          })}
        </select>
      )}

      {!data && <p> Loading....</p>}
    </>
  )
}

export { CountryComponent, CountryDropdown }