import { observer } from 'mobx-react';
import { Text } from '../Text';
import { useApphouse } from '../../context/useApphouse';
import { PopupHeaderProps, PopupHeaderStyles } from './Popup.interface';
import React, { forwardRef } from 'react';
import { css } from 'glamor';
import { useLocalStyles } from '../../styles/defaults/useLocalStyles';

/**
 * The header for the popup component
 * DO NOT EXPORT THIS COMPONENT, ONLY FOR INTERNAL USE
 */
const PopupHeaderComponent = forwardRef(
  (props: PopupHeaderProps, ref: React.ForwardedRef<HTMLElement>) => {
    const {
      title,
      clear = false,
      headerIcon,
      gutters,
      styleOverwrites
    } = props;
    const {
      theme: { tokens, colors }
    } = useApphouse();

    const componentStyles: PopupHeaderStyles = {
      container: {
        alignItems: 'center',
        borderTopLeftRadius: tokens.radius.default,
        borderTopRightRadius: tokens.radius.default,
        boxSizing: 'border-box',
        color: 'inherit',
        display: 'flex',
        gridGap: tokens.spacings.s,
        paddingBottom: clear ? 0 : tokens.spacings.l,
        paddingLeft: tokens.spacings.l,
        paddingTop: tokens.spacings.l
      },
      headerIcon: {
        color: 'inherit',
        position: 'absolute',
        right: 0,
        top: tokens.spacings.l,
        zIndex: 1
      },
      title: {
        color: 'inherit',
        fontFamily: tokens.fontFamily.heading,
        margin: 0,
        padding: 0
      }
    };

    const localStyles = useLocalStyles<PopupHeaderStyles>(
      componentStyles,
      styleOverwrites,
      gutters
    );

    if (!title && !headerIcon) {
      return null;
    }

    return (
      <header
        ref={ref}
        data-style="header"
        {...css(
          localStyles.container,
          clear
            ? {
                background: 'transparent',
                borderBottom: 0,
                color: colors.onPrimary
              }
            : {}
        )}
      >
        {headerIcon && headerIcon}

        <Text
          variant="title"
          data-style="title"
          styleOverwrites={localStyles.title}
        >
          {title}
        </Text>
      </header>
    );
  }
);

export const PopupHeader = observer(PopupHeaderComponent);