import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import React from 'react';
import styled from 'styled-components';

import { TAMANU_COLORS } from '../../constants';
import { ThemedTooltip } from '../Tooltip';
import { RequiredOrnament } from '../RequiredOrnament';

const OuterLabel = styled.label`
  display: inline-block;
  margin-bottom: 4px;
  color: ${TAMANU_COLORS.darkText};
  font-weight: 500;
  font-size: ${props => (props.size === 'small' ? '11px' : '14px')};
  line-height: 16px;
  letter-spacing: 0;
`;

const IconWrapper = styled.div`
  float: right;
`;

const StyledInfoIcon = styled(HelpOutlineIcon)`
  width: 16.25px;
  height: 16.25px;
  color: ${TAMANU_COLORS.midText};
`;

export const OuterLabelFieldWrapper = React.memo(
  React.forwardRef(
    (
      {
        children,
        className,
        htmlFor,
        infoTooltip,
        label,
        required,
        size,
        style,
        'data-testid': dataTestId,
      },
      ref,
    ) => (
      <div style={style} className={className} ref={ref} data-testid={dataTestId}>
        {label && (
          <OuterLabel htmlFor={htmlFor} className="label-field" size={size}>
            {label}
            {required && <RequiredOrnament />}
          </OuterLabel>
        )}
        {infoTooltip && (
          <ThemedTooltip arrow placement="top" title={infoTooltip} data-testid="styledtooltip-pmvq">
            <IconWrapper>
              <StyledInfoIcon />
            </IconWrapper>
          </ThemedTooltip>
        )}
        {children}
      </div>
    ),
  ),
);
