import React from 'react';
import PropTypes from 'prop-types';
import { PictureAsPdfRounded } from '@mui/icons-material';

import { PDF_EXPORT_HIDE_CONTENT } from '@/modules/analytics/common/constants';

import { CircularProgress, Grid, IconButton, Typography } from '@/mui/components';
import { CustomCsvFilled } from '@/mui/components/CustomIcon';

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

function Header(props) {
  return (
    <Grid className={styles.Header} container justifyContent="space-between" alignItems="center">
      <Grid item>
        <Typography variant="h5" color="text.primary" fontWeight={400}>
          {props.children}
        </Typography>
      </Grid>
      <div className={styles.Buttons} data-pdf-export={PDF_EXPORT_HIDE_CONTENT}>
        <IconButton
          disabled={props.disabledExport || props.isExportPdfLoading}
          onClick={props.onExportToPdf}
          size="small"
        >
          {props.isExportPdfLoading ? (
            <CircularProgress color="info" size={14} />
          ) : (
            <PictureAsPdfRounded fontSize="large" htmlColor="info" />
          )}
        </IconButton>

        <IconButton
          disabled={props.disabledExport || props.isExportCsvLoading}
          onClick={props.onExportToCsv}
          size="small"
        >
          {props.isExportCsvLoading ? (
            <CircularProgress color="info" size={14} />
          ) : (
            <CustomCsvFilled fontSize="large" color="info" />
          )}
        </IconButton>
      </div>
    </Grid>
  );
}

Header.propTypes = {
  children: PropTypes.node.isRequired,
  onExportToPdf: PropTypes.func.isRequired,
  onExportToCsv: PropTypes.func.isRequired,
  isExportCsvLoading: PropTypes.bool.isRequired,
  isExportPdfLoading: PropTypes.bool.isRequired,
  disabledExport: PropTypes.bool.isRequired,
};

export default Header;
