import * as React from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import CustomIcon from 'components/items/CustomIcon';
import styleIdentifiers from './formItemLabel.scss';
import Tooltip from '../Tooltip';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  className: string;
  // Label
  label: string;
  // Label icon
  labelIcon: string;
  labelStyle: {};
  labelClassName: string;
  labelIconStyle: {};
  labelIconClassName: string;
  star: boolean;
  notRequired: string;
  input: {};
}

export type FormItemLabelProps = StateProps & DispatchProps & OwnProps;

interface FormItemLabelState {}

export default class FormItemLabel extends React.Component<FormItemLabelProps, FormItemLabelState> {
  renderLabel = () => {
    const {
      className,
      label,
      labelClassName,
      labelStyle,
      labelIcon,
      labelImage,
      labelIconClassName,
      labelIconStyle,
      star,
      labelInfoClassName,
      labelInfoHtml,
      input,
      starClassName,
      labelHtml,
      labelInfo,
      notRequired,
      labelTooltip,
      noFontSize,
    } = this.props;

    const info = labelInfo || notRequired;

    return (
      <label
        htmlFor={input && input.name}
        className={styles('FormItemLabel', noFontSize && 'no-font-size', star && 'required', className, labelClassName)}
        style={labelStyle}
      >
        {labelIcon && (
          <div className={styles('label-icon', labelIconClassName)} style={labelIconStyle}>
            {typeof labelIcon === 'string' ? <CustomIcon icon={labelIcon} /> : labelIcon}
          </div>
        )}
        {labelImage && <img className={styles('label-icon', labelIconClassName)} style={labelIconStyle} src={labelImage} alt={label} />}
        <TextItem path={label} isHtml={labelHtml} />
        {star && <span className={styles('star', starClassName)}>*</span>}
        {info && <TextItem className={styles('info', labelInfoClassName)} path={info} isHtml={labelInfoHtml} />}
        {labelTooltip && <CustomIcon className={styles('icon-label-tooltip')} icon="exclamation-circle" />}
      </label>
    );
  };

  render(): JSX {
    const { label, labelTooltip } = this.props;

    if (!label) return false;

    return labelTooltip ? (
      <Tooltip contentClassName={styles('label-tooltip')} item={this.renderLabel()} direction="right">
        <TextItem path={labelTooltip} />
      </Tooltip>
    ) : (
      this.renderLabel()
    );
  }
}
