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

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 MediaCollection extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collection: null,
            a: null
        };
    }

    async onRemove(productIndex, e) {
        e.preventDefault();
        this.props.onRemoveProduct(productIndex);
    }


    render() {
        if (!(this.props.collection && this.props.collection.products && this.props.collection.products.length > 0)) {
            return <div />;
        }

        let onReorder = async function(productIndexA, productIndexB) {
            if (productIndexA >= this.props.collection.products.length || productIndexA < 0) {
                return;
            }
            this.props.onReorderProduct(productIndexA, productIndexB);
        }

        return (
            <Table compact celled definition>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell width={2}>Title</Table.HeaderCell>
                        <Table.HeaderCell width={1}>Status</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={2}>Location Codes</Table.HeaderCell>
                        <Table.HeaderCell width={2}>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 && product.stripeProductData.skus && product.stripeProductData.skus.data.map(sku => (
                            <Label color="green">{sku.currency}{formatPrice(sku.currency, sku.price)}</Label>
                        ))}
                        </div>
                    );

                    const isRemovable = !this.props.collection.isScheduled
                        || this.props.collection.isPublished === false;

                    return (
                        <DraggableTableRow key={productIndex} i={productIndex} action={onReorder.bind(this)}>
                            <Table.Cell width={2}>
                                <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}>
                                <Label color={product.status === "ACTIVATED" ? "green" : "grey"}>{product.status}</Label>
                            </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>{Math.floor(product.duration / 60000 )} 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={2}>
                                {locationCodes}
                            </Table.Cell>
                            <Table.Cell width={2}>
                                {prices}
                            </Table.Cell>
                            <Table.Cell>
                                <Button color="blue" href={`/cinema/product/${product.id}`}>Edit</Button>
                                {isRemovable && <Button color="red" onClick={this.onRemove.bind(this, productIndex)}>Remove</Button>}
                            </Table.Cell>
                        </DraggableTableRow>
                    );
                })}
                </Table.Body>
            </Table>
        );
    }
}