import React from 'react';
import Immutable from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import IconButton from '../../../components/icon_button';

const storageKey = 'announcements_dismissed';

class Announcements extends React.PureComponent {

  static propTypes = {
    account: ImmutablePropTypes.map.isRequired,
  };

  componentDidUpdate (prevProps, prevState) {
    if (prevState.dismissed !== this.state.dismissed) {
      try {
        localStorage.setItem(storageKey, JSON.stringify(this.state.dismissed));
      } catch (e) {}
    }
  }

  componentWillMount () {
    try {
      const dismissed = JSON.parse(localStorage.getItem(storageKey));
      this.state = { dismissed: Array.isArray(dismissed) ? dismissed : [] };
    } catch (e) {
      this.state = { dismissed: [] };
    }

    const announcements = [];

    announcements.push(
      {
        id: 13,
        icon: '/announcements/info_01.png',
        body: '金剛互換アイテムが入手可能！マクドナルドとのコラボCPが開催',
        link: [
          {
            inline: false,
            href: 'https://gran-matome.com/archives/32091',
            body: '記事を読む',
          },
        ],
      }
      // NOTE: id: 13 まで使用した
    );

    this.announcements = Immutable.fromJS(announcements);
  }

  handleDismiss = (event) => {
    const id = +event.currentTarget.getAttribute('title');

    if (Number.isInteger(id)) {
      this.setState({ dismissed: [].concat(this.state.dismissed, id) });
    }
  }

  render () {
    return (
      <ul className='announcements'>
        {this.announcements.map(announcement => this.state.dismissed.indexOf(announcement.get('id')) === -1 && (
          <li key={announcement.get('id')}>
            <div className='announcements__icon'>
              <img src={announcement.get('icon')} alt='' />
            </div>
            <div className='announcements__body'>
              <div className='announcements__body__dismiss'>
                <IconButton icon='close' title={`${announcement.get('id')}`} onClick={this.handleDismiss} />
              </div>
              <p>{announcement.get('body')}</p>
              <p>
                {announcement.get('link').map((link) => {
                  const classNames = ['announcements__link'];

                  if (link.get('inline')) {
                    classNames.push('announcements__link-inline');
                  }

                  return (
                    <a className={classNames.join(' ')} key={link.get('href')} href={link.get('href')} target='_blank'>
                      {link.get('body')}
                    </a>
                  );
                })}
              </p>
            </div>
          </li>
        ))}
      </ul>
    );
  }

};

export default Announcements;

@@ -851,17 +851,16 @@
 s = %5B%5D;%0A
-%0A
     anno
@@ -874,17 +874,16 @@
 ts.push(
-%0A
       %7B%0A
@@ -895,17 +895,17 @@
    id: 1
-3
+4
 ,%0A      
@@ -934,17 +934,17 @@
 s/info_0
-1
+4
 .png',%0A 
@@ -961,38 +961,24 @@
 y: '
-%E9%87%91%E5%89%9B%E4%BA%92%E6%8F%9B%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E3%81%8C%E5%85%A5%E6%89%8B%E5%8F%AF%E8%83%BD%EF%BC%81%E3%83%9E%E3%82%AF%E3%83%89%E3%83%8A%E3%83%AB%E3%83%89%E3%81%A8%E3%81%AE%E3%82%B3%E3%83%A9%E3%83%9CCP%E3%81%8C%E9%96%8B%E5%82%AC
+1800%E4%B8%87CP%E5%AF%BE%E5%BF%9C%EF%BC%81%E5%8D%8A%E9%A1%8DCP%E7%89%B9%E9%9B%86
 ',%0A 
@@ -1078,22 +1078,18 @@
 com/
-archives/320
+page-27
 91
+3
 ',%0A 
@@ -1138,16 +1138,313 @@
      %5D,%0A
+      %7D,%0A      %7B%0A        id: 15,%0A        icon: '/announcements/info_02.png',%0A        body: '%E3%80%90%E9%87%8D%E8%A6%81%E3%81%AA%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B%E3%80%91mimumedon%E3%81%AE%E5%88%A9%E7%94%A8%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%82%AC%E3%82%A4%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%92%E7%AD%96%E5%AE%9A%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F',%0A        link: %5B%0A          %7B%0A            inline: false,%0A            href: 'https://mimumedon.com/about/more',%0A            body: '%E3%82%AC%E3%82%A4%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%92%E3%81%BF%E3%82%8B',%0A          %7D,%0A        %5D,%0A
       %7D%0A
@@ -1463,17 +1463,17 @@
 E: id: 1
-3
+5
  %E3%81%BE%E3%81%A7%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%0A

Modify announcements data