import { Internship } from "@/data";
import React from "react";
import { Paper, PaperProps, Typography, TypographyProps } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { createStyles, makeStyles } from "@material-ui/core/styles";
import classNames from "classnames";

export type ProposalPreviewProps = {
    proposal: Internship;
}

const Label = ({ children }: TypographyProps) => {
    return <Typography variant="subtitle2" className="proposal__header">{ children }</Typography>
}

const useSectionStyles = makeStyles(theme => createStyles({
    root: {
        padding: theme.spacing(2),
        marginTop: theme.spacing(3)
    }
}))

const Section = ({ children, ...props }: PaperProps) => {
    const classes = useSectionStyles();

    return <Paper {...props} className={ classNames(classes.root, props.className ) }>
        { children }
    </Paper>
}

export const ProposalPreview = ({ proposal }: ProposalPreviewProps) => {
    const { t } = useTranslation();

    return <div className="proposal">
        <Typography className="proposal__primary">{ proposal.intern.name } { proposal.intern.surname }</Typography>
        <Typography className="proposal__secondary">
            { t('internship.intern.semester', { semester: proposal.intern.semester }) }
            { ", " }
            { t('internship.intern.album', { album: proposal.intern.albumNumber }) }
        </Typography>

        <Section>
            <Label>{ t('internship.sections.kind') }</Label>
            <Typography className="proposal__primary">{ proposal.type }</Typography>
        </Section>

        <Section>
            <Label>{ t('internship.sections.duration') }</Label>
            <Typography className="proposal__primary">
                { t('internship.date-range', { start: proposal.startDate, end: proposal.endDate }) }
            </Typography>
            <Typography className="proposal__secondary">
                { t('internship.duration', { duration: 0 })}
                { ", " }
                { t('internship.hours', { hours: proposal.hours })}
            </Typography>
        </Section>

        <Section>
            <Label>{ t('internship.sections.place') }</Label>
            <Typography className="proposal__primary">
                { proposal.company.name }
            </Typography>
            <Typography className="proposal__secondary">
                NIP: { proposal.company.nip }
            </Typography>
        </Section>

        <Section>
            <Label>{ t('internship.office') }</Label>
            <Typography className="proposal__primary">{ t('internship.address.city', proposal.office.address) }</Typography>
            <Typography className="proposal__secondary">{ t('internship.address.street', proposal.office.address) }</Typography>
        </Section>
    </div>
}