import React, { useState }  from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Button, Icon } from 'semantic-ui-react'
import { Table } from 'semantic-ui-react'
import _ from 'lodash'

import { removeWorkout } from './workOutActions'


const WorkOutList = props => {

    const handleSort = (clickedColumn) => () => {

        const [column, data, direction] = useState(0);

        if (column !== clickedColumn) {
          this.setState({
            column: clickedColumn,
            data: _.sortBy(data, [clickedColumn]),
            direction: 'ascending',
          })

          return
        }

        this.setState({
          data: data.reverse(),
          direction: direction === 'ascending' ? 'descending' : 'ascending',
        })
    }

    const renderRows = () => {
        const list = props.list || []
        return list.map(workout => (

            <Table.Row key={workout.id}>
                <Table.Cell>{workout.tempoGasto}h</Table.Cell>
                <Table.Cell>{workout.tipoTarefa}</Table.Cell>
                <Table.Cell>{workout.data}</Table.Cell>
                <Table.Cell>
                    <Button
                    animated='vertical'
                    onClick={() => props.removeWorkout(workout)}
                    >
                        <Button.Content hidden>Deletar</Button.Content>
                        <Button.Content visible>
                            <Icon name='trash' />
                        </Button.Content>
                    </Button>
                </Table.Cell>
            </Table.Row>
        ))
    }

    return (
        <Table sortable celled fixed>
            <Table.Header>
                <Table.Row>
                    <Table.HeaderCell
                     sorted={props.column === 'tempoGasto' ? direction : null}
                     onClick={handleSort('tempoGasto')}
                    >
                        Tempo
                    </Table.HeaderCell>
                    <Table.HeaderCell
                     sorted={props.column === 'tipoTarefa' ? direction : null}
                     onClick={handleSort('tipoTarefa')}
                    >
                        Tipo
                    </Table.HeaderCell>
                    <Table.HeaderCell
                     sorted={props.column === 'data' ? direction : null}
                     onClick={handleSort('data')}
                    >
                        Data
                    </Table.HeaderCell>
                    <Table.HeaderCell>
                        Ações
                    </Table.HeaderCell>
                </Table.Row>
            </Table.Header>

            <Table.Body>
                {renderRows()}
            </Table.Body>
        </Table>
    )
}

const mapStateToProps = state => ({list: state.workout.list})
const mapDispatchToProps = dispatch =>
    bindActionCreators({ removeWorkout }, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(WorkOutList)