import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Map } from 'immutable';
import { useIntl } from 'react-intl';

import { useNotification } from '@strapi/helper-plugin';
import { HeaderLayout } from '@strapi/design-system/Layout';
import { Box } from '@strapi/design-system/Box';
import CheckIcon from '@strapi/icons/Check';
import { Button } from '@strapi/design-system/Button';

import { discardAllChanges, submit } from '../../state/actions/Sitemap';

const Header = () => {
  const settings = useSelector((state) => state.getIn(['sitemap', 'settings'], Map()));
  const initialData = useSelector((state) => state.getIn(['sitemap', 'initialData'], Map()));
  const toggleNotification = useNotification();

  const dispatch = useDispatch();
  const { formatMessage } = useIntl();

  const disabled = JSON.stringify(settings) === JSON.stringify(initialData);

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(submit(settings.toJS(), toggleNotification));
  };

  const handleCancel = (e) => {
    e.preventDefault();
    dispatch(discardAllChanges());
  };

  return (
    <Box background="neutral100">
      <HeaderLayout
        primaryAction={(
          <Box style={{ display: "flex" }}>
            <Button
              onClick={handleCancel}
              disabled={disabled}
              type="cancel"
              size="L"
              variant="secondary"
            >
              {formatMessage({ id: 'sitemap.Button.Cancel', defaultMessage: 'Cancel' })}
            </Button>
            <Button
              style={{ marginLeft: '10px' }}
              onClick={handleSubmit}
              disabled={disabled}
              type="submit"
              startIcon={<CheckIcon />}
              size="L"
            >
              {formatMessage({ id: 'sitemap.Button.Save', defaultMessage: 'Save' })}
            </Button>
          </Box>
        )}
        title={formatMessage({ id: 'sitemap.Header.Title', defaultMessage: 'Sitemap' })}
        subtitle={formatMessage({ id: 'sitemap.Header.Description', defaultMessage: 'Settings for the sitemap XML' })}
        as="h2"
      />
    </Box>
  );
};

export default Header;