import React from 'react';
import superagent from 'superagent';
import { Container, Menu, Segment, Grid, Header, Image, Icon, Button, Form, Label } from 'semantic-ui-react'

export default class ChannelTest extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            channelGroups: []
        };
    }

    async componentDidMount() {
        try {
            const res = await superagent.get("/api/media/public_channel_groups");
            console.log(res.body);
            this.setState({ channelGroups: res.body });
        } catch (e) {
            console.log(e);
        }
    }

    render() {
        return (
            <Container fluid>
            {this.state.channelGroups.map((channelGroup, index) => {
                if (channelGroup.textures && channelGroup.textures.length >= 3) {
                    return (
                        <Segment key={index} >
                        <Header as="h2">{channelGroup.name}</Header>
                        <Image src={channelGroup.textures[2].url} href={channelGroup.textures[2].url} />
                        </Segment>
                    );
                } else {
                    return ( <div />)
                }
            })}
            </Container>
        );
    }
}