import { css } from '@emotion/css';
import { ComponentProps } from 'react';
import * as React from 'react';

import { GrafanaTheme2 } from '@grafana/data';
import { Field, Icon, PopoverContent, ReactUtils, Tooltip, useStyles2 } from '@grafana/ui';

interface EditorFieldProps extends ComponentProps<typeof Field> {
  label: string;
  children: React.ReactElement;
  width?: number | string;
  optional?: boolean;
  tooltip?: PopoverContent;
}

export const EditorField = (props: EditorFieldProps) => {
  const { label, optional, tooltip, children, width, ...fieldProps } = props;

  const styles = useStyles2(getStyles, width);

  // Null check for backward compatibility
  const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children);

  const labelEl = (
    <>
      <label className={styles.label} htmlFor={childInputId}>
        {label}
        {optional && <span className={styles.optional}> - optional</span>}
        {tooltip && (
          <Tooltip placement="top" content={tooltip} theme="info">
            <Icon name="info-circle" size="sm" className={styles.icon} />
          </Tooltip>
        )}
      </label>
      <span className={styles.space} />
    </>
  );

  return (
    <div className={styles.root}>
      <Field className={styles.field} label={labelEl} {...fieldProps}>
        {children}
      </Field>
    </div>
  );
};

const getStyles = (theme: GrafanaTheme2, width?: number | string) => ({
  space: css({
    paddingRight: theme.spacing(0),
    paddingBottom: theme.spacing(0.5),
  }),
  root: css({
    minWidth: theme.spacing(width ?? 0),
  }),
  label: css({
    fontSize: 12,
    fontWeight: theme.typography.fontWeightMedium,
  }),
  optional: css({
    fontStyle: 'italic',
    color: theme.colors.text.secondary,
  }),
  field: css({
    marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove
  }),
  icon: css({
    color: theme.colors.text.secondary,
    marginLeft: theme.spacing(1),
    ':hover': {
      color: theme.colors.text.primary,
    },
  }),
});