import React, { useCallback, useRef, useEffect, memo, useState, useMemo } from 'react';
import Modal, { ModalProps } from 'antd/lib/modal';
import Table from '../Table/Table';
import Search from '../Search/Search';
import SeniorSearch, { SeniorSearchRefProps } from '../Search/SeniorSearch';
import { FormItemProps } from '../Form/interface';
import { TableProps, TableRefProps } from '../Table/interface';

const DEF_WIDTH = 650;

const bodyStyle: React.CSSProperties = {
  height: '430px',
  display: 'flex',
  flexDirection: 'column'
}

export interface ModalTableProps<RecordType>
  extends Omit<ModalProps, 'onOk'> {
  table: TableProps<RecordType>;
  onOk?(data: RecordType[]): void;
  placeholder?: string; // search placeholder
  seniorSearchFormItems?: FormItemProps[];
}

function ModalTable<RecordType extends object = any>({
  onOk: propOk,
  placeholder,
  seniorSearchFormItems,
  table,
  ...modal
}: ModalTableProps<RecordType>) {

  const firstInit = useRef(false);
  const seniorSearchRef = React.useRef<SeniorSearchRefProps>(null);
  const tableRef = useRef<TableRefProps<RecordType>>(null);
  const [query, setQuery] = useState({});

  useEffect(() => {
    if (modal.visible && firstInit.current) tableRef.current?.onRefresh();
    if (modal.visible) firstInit.current = true;
  }, [modal.visible]);

  const onOk = useCallback(() => {
    const [rows] = tableRef.current!.getSelectedRows();
    propOk?.(rows);
  }, [propOk]);

  const fuzzyField = useMemo(() => {
    return table.columns.map(item => item.dataIndex)
  }, [table.columns]);

  const onSearch = useCallback((fuzzyValue: string) => {
    setQuery({
      fuzzyQuery: true,
      fuzzyValue,
      fuzzyField
    })
  }, [fuzzyField]);

  const seniorSearch = useCallback(() => {

  }, [fuzzyField]);

  return (
    <Modal
      centered
      bodyStyle={bodyStyle}
      width={modal.width || DEF_WIDTH}
      {...modal}
      onOk={onOk}>
      {placeholder && (
        <Search
          seniorSearchRef={seniorSearchFormItems ? seniorSearchRef : null}
          onSearch={onSearch}
          placeholder={placeholder} />
      )}
      {seniorSearchFormItems && (
        <SeniorSearch
          groupNumber={2}
          onSearch={seniorSearch}
          ref={seniorSearchRef}
          formItems={seniorSearchFormItems} />
      )}
      <Table<RecordType>
        ref={tableRef}
        query={query}
        rowSelectionType='radio'
        {...table} />
    </Modal>
  )
}

const MemoModalTable = memo(ModalTable) as <RecordType extends object = any>(
  props: React.PropsWithChildren<ModalTableProps<RecordType>>
) => React.ReactElement;

export default MemoModalTable;