import React, { useEffect } from 'react';
import classnames from 'classnames';
import { GroupProps } from 'src/types/op-table';
import { ArrowIcon } from '../common-view';
import Title from './title';

/**
 *
 *
 * <Table.Group name="组名" extra="" >
 *  <Table.Column></Table.Column>
 * </Table.Group>
 *
 */

export default function Group(props: GroupProps) {
  const {
    name,
    extra,
    visible,
    defaultVisible,
    indent,
    children,
    onClick,
    className,
  } = props;
  const [_visible, setVisible] = React.useState(defaultVisible);

  useEffect(() => {
    setVisible(visible);
  }, [visible]);

  return (
    <div
      data-hottag='cn-op.table.group'
      className={classnames('op-table-group', className)}
      style={{ marginLeft: indent }}
    >
      <div className='op-table-group-title'>
        <div
          className={classnames('op-table-group-title-icon', {
            transform: _visible,
          })}
          onClick={() => {
            setVisible(!_visible);
            onClick && onClick(!_visible);
          }}
        >
          <ArrowIcon size={18} color='#196EE6' />
        </div>

        <Title>
          <div>{name}</div>
          <div>{extra}</div>
        </Title>
      </div>
      {_visible ? children : null}
    </div>
  );
}