import { node, oneOf, string } from 'prop-types';

import { Box } from '../Layout/index';
import Card from '../Card/index.jsx';
import Loader from '../Loader/index.jsx';
import Icon from '../Icon/index.jsx';
import React from 'react';
import Tooltip from '../Tooltip/index';
import css from '@styled-system/css';
import styled from '@emotion/styled';

const StyledHeader = styled('header')(
  css({
    paddingTop: 1,
    paddingBottom: 1,
    paddingLeft: 3,
    paddingRight: 3,
    minHeight: '44px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderTopLeftRadius: 'card',
    borderTopRightRadius: 'card',
  }),
  ({ theme }) => ({
    borderBottom: `1px solid ${theme.colors.divider}`,
  }),
);

const StyledIcon = styled('div')({
  position: 'absolute',
  right: '10px',
  top: '4px',
});

const Panel = ({
  header,
  children,
  info,
  loading = false,
  intent = 'neutral',
  className,
  appearance,
  ...boxProps
}) => {
  return (
    <Card
      as="section"
      position="relative"
      display="flex"
      flexDirection="column"
      p={0}
      intent={intent}
      appearance={appearance}
      className={className}
    >
      {header && <StyledHeader>{header}</StyledHeader>}
      <Box position="relative" height="100%" flex="1" {...boxProps}>
        {loading ? (
          <Box p="small" display="flex" justifyContent="center" alignItems="center" flex="1">
            <Loader size={28} />
          </Box>
        ) : (
          children
        )}
      </Box>
      {info && (
        <StyledIcon>
          <Tooltip content={info} position="left">
            <Icon name="warning-circle" size={14} color="Mid Neutral 2" />
          </Tooltip>
        </StyledIcon>
      )}
    </Card>
  );
};

Panel.propTypes = {
  intent: oneOf(['neutral', 'warning', 'info']),
  appearance: oneOf(['default', 'secondary']),
  info: string,
  className: string,
  header: node,
  children: node.isRequired,
};

export default Panel;