import * as React from 'react'
import { connect } from 'react-redux'
import * as FontAwesome from 'react-fontawesome'
import Router from 'next/router'

import ManageTemplatesTable from './ManageTemplatesTable'
import {
  getTemplates,
  deleteTemplates,
} from '../../store/module/campaign/actions'
import { notify } from '../../store/module/notification/actions'

function mapStateToProps(state) {
  // State reducer @ state.form.createTemplate & state.createTemplate
  return {
    form: state.form.createTemplate,
    isPosting: state.createTemplate.isPosting,
    templates: state.manageTemplates.templates,
    isGetting: state.manageTemplates.isGetting,
  }
}

const mapDispatchToProps = { getTemplates, deleteTemplates, notify }

export interface Props {
  form?: any
  getTemplates: any
  templates: any[]
  isGetting: boolean
  deleteTemplates: any
  notify: any
}
export interface State {}

export class ManageTemplatesComponent extends React.Component<Props, State> {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    this.props.getTemplates()
  }

  render() {
    return (
      <div>
        <div className="content-header">
          <h1>
            Templates
            <small>Create and manage your templates</small>
          </h1>
        </div>

        <section className="content">
          <div className="box box-primary">
            <div className="box-body">
              <ManageTemplatesTable
                data={this.props.templates}
                deleteRows={this.deleteRows}
                getTemplateView={this.getTemplateView}
              />
            </div>
            {this.props.isGetting && (
              <div className="overlay">
                <FontAwesome name="refresh" spin />
              </div>
            )}
          </div>
        </section>
      </div>
    )
  }

  deleteRows = templateIds => {
    // templateIds [...Numbers]
    this.props.deleteTemplates(templateIds, this.props.templates)
  }

  getTemplateView = row => {
    // Send user to the campaign view container
    Router.push(
      `/templates/manage/&slug=${row.slug}`,
      `/templates/manage/${row.slug}`
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(
  ManageTemplatesComponent as any
)