import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import classNames from 'classnames/bind'
// import StatusRevisionListContainer from '../../containers/status_revisions_list_container'
import { loadStatusRevisions } from '../../actions/status_revisions'
import ModalLayout from './modal_layout'
import RelativeTimestamp from '../relative_timestamp'
import ScrollableList from '../scrollable_list'
import Text from '../text'

const cx = classNames.bind(_s)

const messages = defineMessages({
  title: { id: 'status_revisions.heading', defaultMessage: 'Revision History' },
})

const mapStateToProps = state => ({
  loading: state.getIn(['status_revisions', 'loading']),
  error: state.getIn(['status_revisions', 'error']),
  revisions: state.getIn(['status_revisions', 'revisions']),
})

const mapDispatchToProps = dispatch => ({
  onLoadStatusRevisions(statusId) {
    dispatch(loadStatusRevisions(statusId))
  },
})

export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class StatusRevisionsModal extends ImmutablePureComponent {

  static propTypes = {
    intl: PropTypes.object.isRequired,
    status: ImmutablePropTypes.map.isRequired,
    onLoadStatusRevisions: PropTypes.func.isRequired,
    loading: PropTypes.bool.isRequired,
    error: PropTypes.bool,
    revisions: ImmutablePropTypes.list.isRequired,
  }

  componentDidMount() {
    this.props.onLoadStatusRevisions(this.props.status.get('id'))
  }

  render() {
    const {
      intl,
      status,
      revisions
    } = this.props

    console.log("revisions:", revisions)
    console.log("revisions.size:", revisions.size)

    return (
      <ModalLayout title={intl.formatMessage(messages.title)} width='480'>
        <div className={[_s.default]}>
          <ScrollableList>
            {
              revisions.map((revision, i) => {
                const isFirst = i === 0
                const isLast = i === revisions.size - 1

                const containerClasses = cx({
                  default: 1,
                  pt5: 1,
                  pb10: 1,
                  mt5: !isFirst,
                  borderColorSecondary: !isLast,
                  borderBottom1PX: !isLast,
                })

                return (
                  <div key={`status-revision-${i}`} className={containerClasses}>
                    <div className={[_s.default, _s.pb5].join(' ')}>
                      <Text size='medium'>
                        {revision.get('text')}
                      </Text>
                    </div>
                    <div className={[_s.default]}>
                      <Text size='small' color='secondary'>
                        Edited on <RelativeTimestamp timestamp={revision.get('created_at')} />
                      </Text>
                    </div>
                  </div>
                )
              })
            }
          </ScrollableList>
        </div>
      </ModalLayout>
    )
  }
}