import React from 'react';
import superagent from 'superagent';

import { 
    Accordion,
    Segment,
    Grid,
    Header,
    Form,
    Image, Label } from 'semantic-ui-react'

export default class MediaItemInfoPanel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            cdnInfo: null
        };
    }

    async componentDidMount() {
        return this.loadCDNInfo();
    }

    async loadCDNInfo() {
        if (this.props.mediaItem.cdn && this.props.mediaItem.cdnId) {
            this.setState({ cdnInfo: null, loading: true });
            try {
                const res = await superagent.get(`/api/admin/media/cdn/${this.props.mediaItem.cdn}/${this.props.mediaItem.cdnId}`).accept('json');
                this.setState({ cdnInfo: res.body, loading: false });
            } catch (e) {
                console.log(e);
                this.setState({ loading: false });
            }
        }
    }

    render() {
        if (!this.props.mediaItem) {
            return <div />;
        }

        let cdnInfo = ( <div /> )
        if (this.state.cdnInfo && this.state.cdnInfo.brightcove) {
            const brightcove = this.state.cdnInfo.brightcove;
            cdnInfo = (
                <Segment secondary>
                    <Header as="h3">CDN Data</Header>
                    <p><Image floated="right" src={brightcove.images.thumbnail.src} /></p>
                    <p><strong>Created At: </strong> {brightcove.created_at}</p>
                    <p><strong>Name: </strong> {brightcove.name}</p>
                    <p><strong>State: </strong> {brightcove.state}</p>
                    <p><strong>Duration: </strong> {brightcove.duration ? (brightcove.duration / 1000.0) : 0} seconds</p>
                    <p><strong>Original Filename: </strong> {brightcove.original_filename}</p>
                </Segment>
            )
        } else if (this.state.cdnInfo && this.state.cdnInfo.bigscreen) {
            const bigscreen = this.state.cdnInfo.bigscreen;
            cdnInfo = (
                <Segment secondary>
                    <Header as="h3">CDN Data</Header>
                    <p><strong>Name: </strong> {bigscreen.name}</p>
                </Segment>
            )
        }
        
        return (
            <Segment.Group horizontal>
                <Segment secondary loading={this.state.loading}>
                    <Header as="h3">Info</Header>
                    <p><strong>Title: </strong> {this.props.mediaItem.title}</p>
                    <p><strong>Type: </strong> <Label>{this.props.mediaItem.type}</Label></p>
                    <p><strong>Stereo: </strong> {this.props.mediaItem.isStereo && <Label color="purple">3D</Label>} <Label>{this.props.mediaItem.stereoPacking}</Label></p>
                    <p><strong>Stereo width: </strong> <Label>{this.props.mediaItem.stereoWidth}</Label></p>
                </Segment>

                {cdnInfo}
            </Segment.Group>
        )
    }
}