import _ from 'messages'
import ActionRowButton from 'action-row-button'
import Icon from 'icon'
import isEmpty from 'lodash/isEmpty'
import map from 'lodash/map'
import React, { Component } from 'react'
import TabButton from 'tab-button'
import { connectStore } from 'utils'
import { FormattedRelative, FormattedTime } from 'react-intl'
import { Container, Row, Col } from 'grid'
import { Text } from 'editable'
import {
  createGetObjectsOfType
} from 'selectors'
import {
  deleteVm,
  editVm,
  revertSnapshot,
  snapshotVm
} from 'xo'

@connectStore(() => {
  const snapshots = createGetObjectsOfType('VM-snapshot').pick(
    (_, props) => props.vm.snapshots
  ).sort()

  return (state, props) => ({
    snapshots: snapshots(state, props)
  })
})
export default class TabSnapshot extends Component {
  render () {
    const { snapshots, vm } = this.props

    return <Container>
      <Row>
        <Col className='text-xs-right'>
          <TabButton
            btnStyle='primary'
            handler={snapshotVm}
            handlerParam={vm}
            icon='add'
            labelId='snapshotCreateButton'
          />
        </Col>
      </Row>
      {isEmpty(snapshots)
        ? <Row>
          <Col className='text-xs-center'>
            <h4>{_('noSnapshots')}</h4>
            <p><em><Icon icon='info' size={1} /> {_('tipLabel')} {_('tipCreateSnapshotLabel')}</em></p>
          </Col>
        </Row>
        : <Row>
          <Col>
            <table className='table'>
              <thead className='thead-default'>
                <tr>
                  <th>{_('snapshotDate')}</th>
                  <th>{_('snapshotName')}</th>
                  <th>{_('snapshotAction')}</th>
                </tr>
              </thead>
              <tbody>
                {map(snapshots, snapshot =>
                  <tr key={snapshot.id}>
                    <td><FormattedTime value={snapshot.snapshot_time * 1000} minute='numeric' hour='numeric' day='numeric' month='long' year='numeric' /> (<FormattedRelative value={snapshot.snapshot_time * 1000} />)</td>
                    <td>
                      <Text value={snapshot.name_label} onChange={value => editVm(snapshot, {name_label: value})} />
                    </td>
                    <td>
                      <ActionRowButton
                        btnStyle='warning'
                        handler={revertSnapshot}
                        handlerParam={snapshot}
                        icon='snapshot-revert'
                      />
                      <ActionRowButton
                        btnStyle='danger'
                        handler={deleteVm}
                        handlerParam={snapshot}
                        icon='delete'
                      />
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </Col>
        </Row>
      }
    </Container>
  }
}

@@ -269,16 +269,68 @@
 'utils'%0A
+import %7B ButtonGroup %7D from 'react-bootstrap-4/lib'%0A
 import %7B
@@ -2305,32 +2305,70 @@
            %3Ctd%3E%0A
+                      %3CButtonGroup%3E%0A  
                 
@@ -2382,32 +2382,34 @@
 ActionRowButton%0A
+  
                 
@@ -2451,32 +2451,34 @@
                 
+  
 handler=%7BrevertS
@@ -2502,32 +2502,34 @@
                 
+ 
+ 
 handlerParam=%7Bsn
@@ -2528,32 +2528,34 @@
 aram=%7Bsnapshot%7D%0A
+  
                 
@@ -2599,32 +2599,34 @@
                 
+  
 /%3E%0A             
@@ -2626,32 +2626,34 @@
                 
+ 
+ 
 %3CActionRowButton
@@ -2645,32 +2645,34 @@
 ActionRowButton%0A
+  
                 
@@ -2713,32 +2713,34 @@
                 
+  
 handler=%7BdeleteV
@@ -2758,32 +2758,34 @@
                 
+ 
+ 
 handlerParam=%7Bsn
@@ -2784,32 +2784,34 @@
 aram=%7Bsnapshot%7D%0A
+  
                 
@@ -2846,33 +2846,72 @@
                 
-/
+  /%3E%0A                      %3C/ButtonGroup
 %3E%0A              

use ButtonGroup with action buttons (#1096)