import React from 'react';
import {formatPrice}  from '../Util/formatters';
import superagent from 'superagent';

import {
    Container,
    Segment,
    Grid,
    Header,
    Image,
    Icon,
    Button,
    Table,
    Form,
    Label,
    Message,
    Menu,
    Tab,
    Dropdown,
    Modal,
    Card, 
    Divider} from 'semantic-ui-react'

export default class CollectionEditor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            products: [],
            collection: null
        };
    }

    async componentDidMount() {
        if (this.props.match.params.collectionId) {
            this.setState({ loading: true });
            const res = await superagent.get(`/api/admin/media/product/${this.props.match.params.collectionId}`).accept('json');
            console.log(res.body);
            this.setState({ collection: res.body, loading: false });
        }

        this.setState({ loading: true });
        const mediaProductsRes = await superagent.get(`/api/admin/media/media_products`).accept('json');
        const mediaProductsOptions = mediaProductsRes.body.map(nv => { return { "key": nv.id, "value": nv.id, "text": `${nv.title}` } });
        this.setState({ allMediaProducts: mediaProductsRes.body, mediaProductsOptions });
    }

    async onSaveCollection() {
        this.setState({ loading: true });

        try {
            if (this.state.collection.id) {
                const res = await superagent.put(`/api/admin/media/collection`).send(this.state.product);
                console.log(res);
                //this.setState({ loading: false });
            } else {
                console.log(this.state.product);
                const res = await superagent.post(`/api/admin/media/collection`).send(this.state.product);
                this.setState({ product: res.body });
            }
            this.setState({ messages: null, loading: false })
        } catch (e) {
            console.log(e.response.body);
            this.setState({ messages: e.response.body, loading: false });
        }
    }

    // Remove and add products to the collection...

    render() {
        return (
            <Table compact celled definition>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell width={3}>Title</Table.HeaderCell>
                        <Table.HeaderCell width={1}>Store Link</Table.HeaderCell>
                        <Table.HeaderCell width={1}>BigMediaId</Table.HeaderCell>
                        <Table.HeaderCell width={1}>Duration</Table.HeaderCell>
                        <Table.HeaderCell width={1}>Synchronization Interval</Table.HeaderCell>
                        <Table.HeaderCell width={1}>Entitlement Class</Table.HeaderCell>
                        <Table.HeaderCell width={1}>Location Codes</Table.HeaderCell>
                        <Table.HeaderCell width={1}>SKUs</Table.HeaderCell>
                        <Table.HeaderCell>Tools</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                {this.props.collection.products.map((product, productIndex) => {
                    const locationCodes = product.locationCodes ? (
                        <div>
                        {product.locationCodes.map(locationCode => (
                            <Label color="blue">{locationCode}</Label>
                        ))}
                        </div>
                    ) : <div />;

                    const prices = (
                        <div>
                        {product.stripeProductData.skus.data.map(sku => (
                            <Label color="green">{sku.currency}{formatPrice(sku.currency, sku.price)}</Label>
                        ))}
                        </div>
                    );
                    
                    return (
                        <Table.Row key={product.id}>
                            <Table.Cell width={3}>
                                <Header as='h4' image>
                                    <Image src={product.marketingData["en-US"].unityPosterTexture && product.marketingData["en-US"].unityPosterTexture["src"]} size="medium" />
                                    {product.title}
                                </Header>
                            </Table.Cell>
                            <Table.Cell width={1}>
                                <a href={`/cinema/${product.bigMediaId}/${product.url}`} target="_new">Store</a>
                            </Table.Cell>
                            <Table.Cell width={1}>
                                {product.bigMediaId}
                            </Table.Cell>
                            <Table.Cell width={1}>
                                <Label>{product.duration} mins</Label>
                            </Table.Cell>
                            <Table.Cell width={1}>
                                <Label>{product.synchronizationInterval} mins</Label>
                            </Table.Cell>
                            <Table.Cell width={1}>
                                <Label>{product.entitlementClass}</Label>
                            </Table.Cell>
                            <Table.Cell width={1}>
                                {locationCodes}
                            </Table.Cell>
                            <Table.Cell width={1}>
                                {prices}
                            </Table.Cell>
                            <Table.Cell>
                                <Button color="blue" href={`/cinema/product/${product.id}`}>Edit</Button>
                            </Table.Cell>
                        </Table.Row>
                    );
                })}
                </Table.Body>
            </Table>
        );
    }
}