import { Fragment } from 'react';
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
import RhUiEditFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-fill-icon';
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import { OnRowEdit } from './TableTypes';
import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
import { css } from '@patternfly/react-styles';

export interface EditColumnProps {
  name?: string;
  className?: string;
  onClick?: OnRowEdit;
  editing?: boolean;
  valid?: boolean;
  saveAriaLabel: string;
  cancelAriaLabel: string;
  editAriaLabel: string;
}

export const EditColumn: React.FunctionComponent<EditColumnProps> = ({
  onClick = null,
  /* eslint-disable @typescript-eslint/no-unused-vars */
  className = '',
  editing,
  valid,
  /* eslint-enable @typescript-eslint/no-unused-vars */
  saveAriaLabel,
  cancelAriaLabel,
  editAriaLabel,
  ...props
}: EditColumnProps) => (
  <Fragment>
    <div className={css(inlineStyles.inlineEditGroup, inlineStyles.modifiers.iconGroup, 'pf-m-action-group')}>
      <div className={css(inlineStyles.inlineEditAction)}>
        <Button
          aria-label={saveAriaLabel}
          {...props}
          onClick={(e) => onClick(e, 'save')}
          variant="plain"
          icon={<CheckIcon />}
        />
      </div>
      <div className={css(inlineStyles.inlineEditAction)}>
        <Button
          aria-label={cancelAriaLabel}
          {...props}
          onClick={(e) => onClick(e, 'cancel')}
          variant="plain"
          icon={<RhMicronsCloseIcon />}
        />
      </div>
    </div>
    <div className={css(inlineStyles.inlineEditAction, inlineStyles.modifiers.enableEditable)}>
      <Button
        aria-label={editAriaLabel}
        {...props}
        onClick={(e) => onClick(e, 'edit')}
        variant="plain"
        icon={<RhUiEditFillIcon />}
      />
    </div>
  </Fragment>
);
EditColumn.displayName = 'EditColumn';