import * as React from 'react'
import { Link } from 'react-router-dom'
import { withStyles } from '@material-ui/core'
import { Index } from 'react-virtualized'

import * as Interfaces from '../../interfaces'
import * as utils from '../../utils'
import GenericList, { IGenericListProps } from '../List'
import { crudIndex } from '../../jss/main'
import CmsButton from '../CmsButton'
import { FileIcon, BanIcon, FileEmptyIcon } from '../SvgIcons'

class TagList extends GenericList<Interfaces.ITag> {
    constructor (props: IGenericListProps<Interfaces.ITag>) {
        super(props)

        this.onDelete = this.onDelete.bind(this)
    }

    contentLink = (tagId: string, contentType: string) => (props: any) => <Link to={`${this.props.path}/content/${tagId}/${contentType}s`} {...props} />

    onSelected = (tag: Interfaces.ITag) => {
        if (this.props.onSelected) {
            this.props.onSelected(tag)
        }
    }

    onDelete = (tag: Interfaces.ITag) => {
        if (this.props.onDelete) {
            this.props.onDelete(tag)
        }
    }

    getButtonIcon = (contentType: string) => {
        const { classes } = this.props
        switch (contentType) {
        case 'Page': {
            return FileIcon(classes.buttonSvgMargin, 'icon')
        }
        default: {
            return FileEmptyIcon(classes.buttonSvgMargin, 'icon')
        }
        }
    }

    getCustomButtons = (tag: Interfaces.ITag) => {
        const { classes } = this.props
        if (tag.contentTypes !== null && tag.contentTypes.length > 0) {
            let buttons = new Array<JSX.Element>()
            for (let i = 0; i < tag.contentTypes.length; i++) {
                const contentType = tag.contentTypes[i]
                buttons.push(<div key={`${tag.tagId}-${contentType}`}>
                    <CmsButton size='small' onClick={() => this.onSelected(tag)} component={this.contentLink(tag.tagId, contentType)} color='secondary' components={[this.getButtonIcon(contentType), <span key='label'>View {contentType}s</span>]} variant='text' />
                </div>)
            }
            return <utils.Aux>{buttons}</utils.Aux>
        } else {
            return <div>
                <CmsButton size='small' color='secondary' onClick={() => this.onDelete(tag)} components={[BanIcon(classes.buttonSvgMargin, 'icon'), <span key='label'>Delete Tag</span>]} variant='text' />
            </div>
        }
    }

    getFilter () {
        return null
    }

    getItem (index: number, filterText: string) {
        const { loading, itemType, filteredItems } = this.props
        if (loading) {
            return null
        } else {
            let item = filteredItems[index]
            const details = <utils.Aux>
                {utils.HtmlHelper.renderTitleValue('Name', item.name, filterText)}
            </utils.Aux>
            return this.getListItem(item.tagId, itemType, true, details, this.getCustomButtons(item))
        }
    }

    getRowHeight (index: Index) {
        const { filteredItems } = this.props
        let item = filteredItems[index.index]
        if (item.contentTypes !== null && item.contentTypes.length > 0) {
            if (window.innerWidth > 480) {
                return ((24 * (4)) + 35)
            }
            return ((30 * 4) + 35)
        }
        if (window.innerWidth > 480) {
            return ((24 * (3)) + 35)
        return ((30 * 3) + 35)
    }

    getRadio () {
        return null
    }
}

export default withStyles(crudIndex)(TagList)
        }