import CloseIcon from '@material-hu/icons/material/Close';
import Chip from '@material-hu/mui/Chip';
import Divider from '@material-hu/mui/Divider';
import Grid from '@material-hu/mui/Grid';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { useReadOnly } from '../../context/ReadOnlyContext';

type CycleEditHeaderProps = {
  name: string;
  onGoBack: () => void;
};

const CycleEditHeader = ({ name, onGoBack }: CycleEditHeaderProps) => {
  const { t } = useLokaliseTranslation('performance');
  const { isReadOnly } = useReadOnly();

  return (
    <Stack
      sx={{
        top: -5,
        left: 0,
        zIndex: 200,
        px: 2,
        position: 'sticky',
        backgroundColor: 'background.default',
      }}
    >
      <Grid
        container
        sx={{ mb: 2 }}
        alignItems="center"
      >
        <Grid
          item
          xs
        >
          <Stack sx={{ flexDirection: 'row', alignItems: 'center' }}>
            <IconButton
              sx={{ mr: 2 }}
              onClick={onGoBack}
              aria-label={t('close')}
            >
              <CloseIcon />
            </IconButton>
            <Typography
              variant="h5"
              color="textPrimary"
              sx={{
                display: 'inline',
                mr: 2,
                maxLines: 1,
                maxWidth: 600,
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
            >
              {name}
            </Typography>
            {isReadOnly && (
              <Chip
                label={t('cycles.view_only_mode')}
                size="small"
                color="info"
                variant="outlined"
              />
            )}
          </Stack>
        </Grid>
      </Grid>
      <Divider />
    </Stack>
  );
};

export default CycleEditHeader;