import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { IConnectorConfig } from '../../../common/catalogo-protocol';

import TweenOne from 'rc-tween-one';
import { Flex } from '@rebass/grid';
import { Card, Icon } from 'antd';

const { Meta } = Card;

interface ConnectorCardProps {
    index: number;
    conn: IConnectorConfig;
    onSelect: (index: number) => void;
}

interface ConnectorCardState {
    metaHeight: number;
    extraHeight: number;
    cardExpanded: boolean;
}

export default class ConnectorCard extends React.Component<ConnectorCardProps, ConnectorCardState> {
    // container do card
    private card = null;

    constructor(props: ConnectorCardProps) {
        super(props);
        this.state = {
            cardExpanded: false,
            metaHeight: 0,
            extraHeight: 0
        };
    }

    componentDidMount() {
        this.setState(this.setCardHeight());
    }

    private onSelect = (index: number) => this.props.onSelect(index);

    private onToggleCard = (state: boolean) => {
        this.setState({cardExpanded: !state, ...(!state ? this.setCardHeight() : {})});
    }

    /**
     * Seta o tamanho do card
     * Esse tamanho é importante para a animação de collapse e expand do card
     */
    private setCardHeight = () => {
        const cardDom = ReactDOM.findDOMNode(this.card);
        const metaDom = cardDom.firstChild.firstChild.firstChild.firstChild;
        const extraHeight = (cardDom as HTMLElement).offsetHeight;
        const metaHeight = (metaDom as HTMLElement).offsetHeight;
        return { extraHeight, metaHeight };
    }

    render() {
        const { index, conn } = this.props;
        const { metaHeight, extraHeight, cardExpanded } = this.state;

        const animateMeta = cardExpanded
            ? { height: 0 , duration: 300 }
            : { height: metaHeight, duration: 300 }

        const animateExtra = cardExpanded
            ? { height: extraHeight , duration: 300 }
            : { height: 31, duration: 300 }

        return (
            <Card
                key={`connector_card_${index}`}
                bordered
                className="antd-store-card"
                size="small"
                ref={(c) => { this.card = c; }}
            >
                <Flex width={1} flexDirection={'column'} style={{height: '100%'}} justifyContent={'space-between'}>
                    <TweenOne
                        key={`ant-card-meta_${index}`}
                        animation={animateMeta}
                        onClick={() => this.onSelect(index)}
                    >
                        <Meta
                            title={conn.title}
                            description={conn.description}
                            avatar={<img alt="connector" src={`${conn.image}`}  style={{maxWidth: "32px", maxHeight: "32px"}}/>}
                        />
                    </TweenOne>
                    
                    <TweenOne
                        key={`ant-card-extras-${index}`}
                        animation={animateExtra}
                        className="ant-card-actions"
                    >
                        <Flex  flexDirection={'row'} justifyContent={'space-between'}
                            alignItems={'center'} p={'5px'}
                        >
                            <Flex onClick={() => this.onToggleCard(cardExpanded)} className="extra">
                                {
                                    cardExpanded
                                        ? <Icon type="arrow-down" />
                                        : <Icon type="arrow-up" />
                                }
                            </Flex>
                            <Flex flexDirection={'row'} alignItems={'center'}>
                                Version: {Array.isArray(conn.version) ? 'multiple' : conn.version}
                            </Flex>
                        </Flex>
                        <Flex style={{overflow: 'hidden'}} p={'5px'}>
                            Type: {conn.type}
                            Keywords: {conn.keywords}
                        </Flex>
                    </TweenOne>
                </Flex>
            </Card>
        );
    }
}