import * as React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';

import { IconButton } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';

const messages = defineMessages({
  close: { id: 'pre_header.close', defaultMessage: 'Close' },
});

export default () => {
  const intl = useIntl();

  const [hidden, setHidden] = React.useState(false);
  const siteTitle = useAppSelector((state) => state.instance.title);

  const handleClose = () => {
    localStorage.setItem('soapbox:welcome-banner', '0');
    setHidden(true);
  };

  React.useEffect(() => {
    const shouldBeHidden = localStorage.getItem('soapbox:welcome-banner') === '0';

    setHidden(shouldBeHidden);
  }, []);

  if (hidden) {
    return null;
  }

  return (
    <div className='bg-primary-900 z-10'>
      <div className='max-w-7xl flex justify-between mx-auto px-2 sm:px-6 lg:px-8'>
        <div className='h-14 flex items-center space-x-3'>
          <p className='text-white font-semibold'>
            <span>Welcome to {siteTitle}</span>
          </p>

          <Link className='text-sea-blue text-sm lowercase hover:underline' to='/beta'>
            Learn More
          </Link>
        </div>

        <div className='flex items-center'>
          <IconButton
            transparent
            src={require('@tabler/icons/icons/x.svg')}
            onClick={handleClose}
            title={intl.formatMessage(messages.close)}
            className='bg-transparent text-white text-opacity-75'
            iconClassName='w-5 h-5'
          />
        </div>
      </div>
    </div>
  );
};