import { Internship } from "@/data";
import React from "react";
import { Typography } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import classNames from "classnames";
import { useVerticalSpacing } from "@/styles";
import moment from "moment";
import { Label, Section } from "@/components/section";
import { StudentPreview } from "@/pages/user/profile";

export type ProposalPreviewProps = {
    proposal: Internship;
}

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

    const classes = useVerticalSpacing(3);
    const duration = moment.duration(proposal.endDate.diff(proposal.startDate));

    return <div className={ classNames("proposal", classes.root) }>
        <div>
            <StudentPreview student={ proposal.intern } />
        </div>

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

            <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>

        <Section>
            <Label>{ t('internship.sections.kind') }</Label>
            <Typography className="proposal__primary">{ proposal.type.label.pl }</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, count: Math.floor(duration.asWeeks()) }) }
                { ", " }
                { t('internship.hours', { hours: proposal.hours, count: proposal.hours }) }
            </Typography>
        </Section>

        <Section>
            <Label>{ t('internship.sections.mentor') }</Label>
            <Typography className="proposal__primary">{ proposal.mentor.name } { proposal.mentor.surname }</Typography>
            <Typography className="proposal__secondary">{ proposal.mentor.email }, { proposal.mentor.phone }</Typography>
        </Section>
    </div>
}