import React, { useMemo, useRef, useState } from 'react';
import PanelBox from '../../components/PanelBox';
import { useDispatch, useSelector } from 'react-redux';
import { SLGC_TYPES } from '../../consts';
import { IconButton, InputBase, makeStyles, Paper, Table, TableBody, TableContainer, TableHead, TableRow } from '@material-ui/core';
import { Search } from '@material-ui/icons';
import useRequest from '../../../../utils/useRequest';
import { DcpjPromise } from '../../../../models/_/dcpj';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import { openRecordPop } from '../../MapCtrl/_';
import { adnmExact, adnmZhen } from '../../../../models/_/adcd';

const useStyles = makeStyles({
  root: {
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
  },

  toolbar: {
    marginTop: '0.8rem',
    display: 'flex',
    alignItems: 'center',
    flexShrink: 0,
    marginBottom: '0.8rem',
  },

  table: {
    flexGrow: 1,
    height: '20rem',
    marginBottom: '0.5rem'
  },

  input: {
    marginLeft: '0.8rem',
    flex: 1,
  },
  iconButton: {
    padding: '0.6rem',
  },
});

function SlgcList({ style }) {
  const classes = useStyles();

  const [search, setSearch] = useState('');

  const listType = useSelector(s => s.slgcview.listType);
  const dispatch = useDispatch();
  const inputRef = useRef();

  const { data } = useRequest(DcpjPromise[listType].get, listType);

  const filterData = useMemo(() => {
    if (!data) {
      return [];
    }

    return data.filter((o) => {
      if (search && o.NAME.indexOf(search) < 0) {
        return false
      }
      return true;
    });
  }, [data, search])

  const doSearch = () => {
    setSearch(inputRef.current.value);
  }

  const searchPressed = (e) => {
    if (e.keyCode === 13) {
      doSearch();
    }
  }

  const flyTo = (record) => {
    openRecordPop(dispatch, listType, record, true);
  }

  return (
    <PanelBox
      style={style}
      title={"水利工程:" + SLGC_TYPES[listType]}
      color="purple"
    >
      <div className={classes.root}>
        <Paper className={classes.toolbar}>
          <InputBase
            className={classes.input}
            placeholder="名称过滤"
            inputRef={inputRef}
            onKeyDown={searchPressed}
          />
          <IconButton onClick={doSearch} className={classes.iconButton} aria-label="search">
            <Search />
          </IconButton>
        </Paper>
        <div className={classes.table}>
          <TableContainer style={{ height: '100%' }}>
            <Table size="small" stickyHeader>
              <TableHead>
                <TableRow>
                  <DpTableCell align="left" style={{ width: '60%' }}>名称</DpTableCell>
                  <DpTableCell align="right" style={{ width: '40%' }}>行政区划</DpTableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {filterData.map((row) => (
                  <DpTableRow key={row.PID}>
                    <DpTableCell component="th" scope="row">
                      <div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.NAME}</div>
                    </DpTableCell>
                    <DpTableCell align="right">{adnmExact(row.ADCD)}</DpTableCell>
                  </DpTableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        </div>
      </div>
    </PanelBox>
  )
}

export default SlgcList;