import React from 'react';
import { observer } from 'mobx-react';
import styled from 'styled-components';

import {
    Chip, Button, Dialog, DialogActions, DialogContent, DialogTitle,
    LinearProgress, Paper, Tabs, Tab
} from '@material-ui/core';

import CloseIcon from '@material-ui/icons/Close';

import { DetailsDialogMap, DetailsDialogMapHeight } from './DetailsDialogMap';
import { TranscriptViewer } from './TranscriptViewer';
import { MetadataViewer } from './MetadataViewer';

import { DetailsDialogState, DetailsTabEnum } from '../states/DetailsDialogState';

// Showing document details in a dialog
@observer
export class DetailsDialog extends React.Component<{ state: DetailsDialogState, hideMe: () => void, azureMapSubscriptionKey: string }> {

    render(): JSX.Element {

        const state = this.props.state;

        return (
            <Dialog
                open={true}
                onClose={() => this.props.hideMe()}
                fullWidth={true}
                maxWidth="xl"
            >
                <DetailsDialogTitle>
                    {state.name}

                    <CloseButton onClick={() => this.props.hideMe()}>
                        <CloseIcon/>
                    </CloseButton>

                </DetailsDialogTitle>

                <DialogContent>

                    {!!state.errorMessage && (
                        <ErrorChip color="secondary" label={state.errorMessage} onDelete={() => state.HideError()} />
                    )}

                    <Tabs value={state.selectedTab}
                        onChange={(ev: React.ChangeEvent<{}>, val: DetailsTabEnum) => state.selectedTab = val}
                    >
                        <Tab label="Transcript"  />
                        <Tab label="Metadata" />
                        {!!state.coordinates && (<Tab label="Map" />)}
                    </Tabs>

                    <DetailsPaper>
                    
                        {state.selectedTab === DetailsTabEnum.Transcript && !state.inProgress && 
                            (<TranscriptViewer state={state}/>)
                        }

                        {state.selectedTab === DetailsTabEnum.Metadata && !state.inProgress &&
                            (<MetadataViewer state={state}/>)
                        }
                        
                        {state.selectedTab === DetailsTabEnum.Map && !state.inProgress &&
                            (<DetailsDialogMap name={state.name} coordinates={state.coordinates} azureMapSubscriptionKey={this.props.azureMapSubscriptionKey} />)
                        }

                    </DetailsPaper>

                    {!!state.inProgress && (<LinearProgress />)}
                    
                </DialogContent>

                <DetailsDialogActions/>

            </Dialog>
        );
    }
}

const DetailsDialogActions: typeof DialogActions = styled(DialogActions)({
    padding: '20px !important'
})

const DetailsPaper: typeof Paper = styled(Paper)({
    padding: 10,
    height: DetailsDialogMapHeight,
    overflow: 'hidden'
})

const CloseButton: typeof Button = styled(Button)({
    float: 'right'
})

const DetailsDialogTitle: typeof DialogTitle = styled(DialogTitle)({
    paddingBottom: '0px !important'
})

const ErrorChip: typeof Chip = styled(Chip)({
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20
})