import * as React from 'react'
import * as cx from 'classnames'
import { StylableComponent } from '../theme'
import { Icon } from '../icon'

import { AccordionSectionProps } from './interfaces'

const styles = require('../../../src/components/accordion/styles.scss')

export class AccordionSection extends StylableComponent<AccordionSectionProps> {
    public render(): JSX.Element {
        const { title, children, expanded, onToggle } = this.props
        return (
            <section
                style={this.sectionStyles()}
                className={cx(styles.section, {
                    [styles.sectionExpanded]: expanded,
                })}>
                <header
                    className={cx(styles.sectionHeader, {
                        [styles.sectionHeaderExpanded]: expanded,
                    })}
                    style={this.headerStyles()}
                    onClick={onToggle}>
                    {title}
                    <Icon
                        icon={`${expanded ? 'up' : 'down'}-arrow`}
                        fill={expanded ? 'white' : this.gray(800)}
                        size={10}
                        className={styles.indicator} />
                </header>
                {this.bodyNode()}
            </section>
        )
    }

    private bodyNode(): JSX.Element | null {
        const { children, expanded } = this.props
        if (!expanded) return null
        return  (
            <div
                style={{
                    backgroundColor: 'white',
                    color: this.gray(800),
                }}
                className={styles.sectionBody}>
                {children}
            </div>
        )
    }

    // private sectionStyles(): object {

    // }

    private sectionStyles(): object {
        const { expanded } = this.props
        return {
            borderColor: expanded
                ? this.primary()
                : this.gray(100),
            backgroundColor: expanded
                ? this.primary()
                : this.gray(100),
            color: expanded ?
                'white'
                : this.gray(800),
        }
    }

    private headerStyles(): object {
        const { expanded } = this.props
        return {
            backgroundColor: expanded
                ? this.primary()
                : this.gray(100),
            color: expanded ?
                'white'
                : this.gray(800),
        }
    }
}