import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';
import { CloseOutlined, CropSquareOutlined, RemoveOutlined } from '@mui/icons-material';

import { IconButton, Stack, Typography } from '@/mui/components';

import styles from './Container.module.scss';

function Container(props) {
  const [isCollapsed, setIsCollapsed] = useState(false);

  const Icon = isCollapsed ? CropSquareOutlined : RemoveOutlined;

  const handleCollapse = () => setIsCollapsed((prev) => !prev);

  return (
    <Stack className={styles.Root}>
      <Stack
        direction="row"
        justifyContent="space-between"
        alignItems="center"
        className={classNames(styles.Header, { [styles.Header___withoutRadius]: props.headerWithoutRadius })}
      >
        <Typography variant="body2" color="common.white">
          {props.title}
        </Typography>
        <Stack direction="row" justifyContent="space-between" gap={1}>
          <IconButton
            size="small"
            onClick={handleCollapse}
            style={{
              // @todo Remove sx after PCN moved to new uikit
              // eslint-disable-next-line local-rules/no-inline-styles
              fontSize: '18px !important',
              // eslint-disable-next-line local-rules/no-inline-styles
              borderRadius: '50% !important',
            }}
          >
            <Icon htmlColor="common.white" />
          </IconButton>
          <IconButton
            size="small"
            onClick={props.onClose}
            style={{
              // @todo Remove sx after PCN moved to new uikit
              // eslint-disable-next-line local-rules/no-inline-styles
              fontSize: '18px !important',
              // eslint-disable-next-line local-rules/no-inline-styles
              borderRadius: '50% !important',
            }}
          >
            <CloseOutlined htmlColor="common.white" />
          </IconButton>
        </Stack>
      </Stack>
      <Stack>{!isCollapsed && props.children}</Stack>
    </Stack>
  );
}

Container.defaultProps = {
  headerWithoutRadius: false,
  onClose: () => null,
};

Container.propTypes = {
  headerWithoutRadius: PropTypes.bool,
  title: PropTypes.node.isRequired,
  children: PropTypes.node.isRequired,
  onClose: PropTypes.func,
};

export default Container;
