import React from 'react';
import { fromUnixTime, formatDistanceToNow, format } from "date-fns";
import { formatInTimeZone } from 'date-fns-tz'

import { 
    Accordion,
    Segment,
    Grid,
    Header,
    Image,
    Message,
    Icon,
    Button,
    Table } from 'semantic-ui-react'
import { DEFAULT_TIMEZONE } from '../CloudApi/Constants.js';

export default class Entitlement extends React.Component {
    constructor(props) {
        super(props);
    }

    async componentDidMount() {
    }

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

        const timezone = DEFAULT_TIMEZONE;
        const createdAt = formatInTimeZone(fromUnixTime(this.props.entitlement.createdAt._seconds), timezone, 'PPPpp z');
        const start = (this.props.entitlement.activationTimestamp) ? formatInTimeZone(fromUnixTime(this.props.entitlement.activationTimestamp._seconds), timezone, 'PPPp z') : "N/A";
        const end = (this.props.entitlement.activationTimestamp) ? formatInTimeZone(fromUnixTime(this.props.entitlement.expirationTimestamp._seconds), timezone, 'PPPp z') : "N/A";

        let receipt = (
            <div />
        );
/*
        let productInfo = (
            <Table.Row key={productIndex}>
                <Table.Cell width={3}>

                </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>
                    {this.props.collection.isPublished === false && <Button color="Red" onClick={this.onRemove.bind(this, productIndex)}>Remove</Button>}
                </Table.Cell>
            </Table.Row>
        )*/

        let productImage = (this.props.entitlement.productSnapshot.marketingData["en-US"].unityPosterTexture) &&
            <Image src={this.props.entitlement.productSnapshot.marketingData["en-US"].unityPosterTexture["src"]} size="medium" />;

        return (
            <Segment>
                <Segment>
                    <Header as='h3' image>
                        <Image src='/images/avatar_b.jpg' rounded size='mini' />
                        <Header.Content>
                            <Header.Subheader>Purchaser: <a href={`/account/${this.props.entitlement.bigscreenAccount.id}`}>{this.props.entitlement.bigscreenAccount.username}</a></Header.Subheader>
                        </Header.Content>
                    </Header>
                </Segment>

                <Segment>
                    <Header as='h3' image>
                        {productImage}
                        <Header.Content>
                        <a href={`/cinema/product/${this.props.entitlement.productSnapshot.id}`}>{this.props.entitlement.productSnapshot.title}</a>
                        </Header.Content>
                    </Header>
                </Segment>

                <Table padded compact celled definition>
                    <Table.Body>
                        <Table.Row>
                            <Table.HeaderCell width={2}>Entitlement class</Table.HeaderCell>
                            <Table.Cell>{this.props.entitlement.entitlementClass}</Table.Cell>
                        </Table.Row>
                        <Table.Row>
                            <Table.HeaderCell width={2}>Status</Table.HeaderCell>
                            <Table.Cell>{this.props.entitlement.status}</Table.Cell>
                        </Table.Row>
                        
                        <Table.Row>
                            <Table.HeaderCell width={2}>Availability</Table.HeaderCell>
                            <Table.Cell> {start} - {end}</Table.Cell>
                        </Table.Row>
                        <Table.Row>
                            <Table.HeaderCell width={2}>Info</Table.HeaderCell>
                            <Table.Cell>
                                <Header as='h4' image>
                                    <Header.Content>
                                        {createdAt}
                                        <Header.Subheader>Entitlement ID: {this.props.entitlement.id}</Header.Subheader>
                                    </Header.Content>
                                </Header>
                            </Table.Cell>
                        </Table.Row>
                    </Table.Body>
                </Table>
            </Segment>
        )
    }
}