import React, { useState, useCallback } from 'react';
import ModalTable, { ModalTableProps } from '../ModalTable/ModalTable';
import Select, { SelectProps } from './Select';
import Icon from '../Icon/Icon';
import { setFormExtraValues } from './util';

const iconStyle: React.CSSProperties = { pointerEvents: 'auto' };

interface IProps<RecordType> extends SelectProps<RecordType> {
  modalTable: ModalTableProps<RecordType>,
}

function ModalTableInput<RecordType extends object = any>({
  modalTable,
  ...select
}: IProps<RecordType>) {
  const [visible, setVisible] = useState(false);
  const onCancel = useCallback(() => setVisible(false), []);
  const onClick = useCallback(() => setVisible(true), []);

  function onOk(rows: RecordType[]) {
    setVisible(false);
    setFormExtraValues({ ['_' + select.id]: rows });
    select.onChange?.(rows.map(item => item[select.fieldNames?.value || 'value']), select.id!);
  }

  return (
    <>
      <Select
        isModalTable
        {...select}
        url={modalTable.table.url}
        onClick={!select.showSearch ? onClick : undefined}
        suffixIcon={
          !select.disabled ? (
            <Icon
              onClick={onClick}
              style={iconStyle}
              icon='&#xe63b;' />
          ) : null
        } />
      {!select.disabled && (
        <ModalTable <RecordType>
          {...modalTable}
          onOk={onOk}
          onCancel={onCancel}
          visible={visible} />
      )}
    </>
  )
}

export default ModalTableInput;