import * as React from 'react';
import { IConnectorConfig } from '../../../common/catalogo-protocol';

import ConnectorCard from '../connectors/connectors-card';

interface IFiltersInterface {
    name: string;
    category: string[];
}

interface CatalogoConnectorsProps {
    connectors: IConnectorConfig[];
    onSelect: (index: number) => void;
    filters: IFiltersInterface
}

interface CatalogoConnectorsState {
    codeOpen: boolean;
    codeHeight: number;
}

export default class CatalogoConnectors extends React.Component<CatalogoConnectorsProps, CatalogoConnectorsState> {
    constructor(props) {
        super(props);
        this.state = {
            codeOpen: false,
            codeHeight: 0
        }
    }

    render() {
        const { connectors, filters } = this.props;

        return (
            <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(auto-fill, 300px)',
                    gridGap: '0.5rem'
                }}
            >
                {
                    connectors.map((conn: IConnectorConfig, index: number) => {
                        // Filters section
                        // Filtro pelo nome do conector
                        if(
                            filters.name !== '' &&
                            !conn.title.toLowerCase().includes(filters.name.toLowerCase())
                        ) return null;
                        //Filtro pela categoria
                        if(
                            filters.category.length > 0 &&
                            filters.category.filter(cat => {
                                if(Array.isArray(conn.keywords)) {
                                    return conn.keywords.indexOf(cat) > -1;
                                } else {
                                    return conn.keywords.includes(cat);
                                }
                            }).length === 0
                        ) return null;

                        return <ConnectorCard key={`connector-card-${index}`} conn={conn} index={index} onSelect={(index) => this.props.onSelect(index)}/>
                    })
                }
            </div>
        );
    }
}