system-praktyk-front/src/forms/internship.tsx

import React, { HTMLProps, useEffect, useMemo, useState } from "react";
import { Button, FormControl, FormHelperText, Grid, Input, InputLabel, TextField, Typography } from "@material-ui/core";
import { KeyboardDatePicker as DatePicker } from "@material-ui/pickers";
import { CompanyForm } from "@/forms/company";
import { StudentForm } from "@/forms/student";
import { sampleStudent } from "@/provider/dummy/student";
import { Course, Internship, InternshipType, internshipTypeLabels } from "@/data";
import { Nullable } from "@/helpers";
import moment, { Moment } from "moment";
import { computeWorkingHours } from "@/utils/date";
import { Autocomplete } from "@material-ui/lab";
import { formFieldProps } from "@/forms/helpers";
import { emptyInternship } from "@/provider/dummy/internship";
import { InternshipProposalActions, useDispatch } from "@/state/actions";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { AppState } from "@/state/reducer";
import { Link as RouterLink, useHistory } from "react-router-dom";
import { route } from "@/routing";
import { useProxyState } from "@/hooks";
import { getInternshipProposal } from "@/state/reducer/proposal";
import { Actions } from "@/components";

export type InternshipFormProps = {}

export type InternshipFormSectionProps = {
    internship: Nullable<Internship>,
    onChange: (internship: Nullable<Internship>) => void,
}

export const InternshipTypeItem = ({ type, ...props }: { type: InternshipType } & HTMLProps<any>) => {
    const info = internshipTypeLabels[type];

    return (
        <div className="internship=type-item" { ...props }>
            <div>{ info.label }</div>
            { info.description && <Typography variant="caption">{ info.description }</Typography> }
        </div>
    )
}

const InternshipProgramForm = ({ internship, onChange }: InternshipFormSectionProps) => {
    const fieldProps = formFieldProps(internship, onChange);

    const course = internship.intern?.course as Course;

    return (
        <Grid container>
            <Grid item md={4}>
                <Autocomplete renderInput={ props => <TextField { ...props } label="Rodzaj praktyki/umowy" fullWidth/> }
                              getOptionLabel={ (option: InternshipType) => internshipTypeLabels[option].label }
                              renderOption={ (option: InternshipType) => <InternshipTypeItem type={ option } /> }
                              options={ Object.values(InternshipType) as InternshipType[] }
                              disableClearable
                              { ...fieldProps("type", (event, value) => value) as any }
                />
            </Grid>
            <Grid item md={8}>
                { internship.type === InternshipType.Other && <TextField label={"Inny - Wprowadź"} fullWidth/> }
            </Grid>
            {/*<Grid item>*/}
            {/*    <FormGroup>*/}
            {/*        <FormLabel component="legend" className="subsection-header">Realizowane punkty programu praktyk (minimum 3)</FormLabel>*/}
            {/*        { course.possibleProgramEntries.map(entry => {*/}
            {/*            return (*/}
            {/*                <FormControlLabel label={ entry.description } key={ entry.id }*/}
            {/*                                  control={ <Checkbox /> }*/}
            {/*                />*/}
            {/*            )*/}
            {/*        }) }*/}
            {/*    </FormGroup>*/}
            {/*</Grid>*/}
        </Grid>
    )
}

const InternshipDurationForm = ({ internship, onChange }: InternshipFormSectionProps) => {
    const [startDate, setStartDate] = useProxyState<Moment | null>(internship.startDate, value => onChange({ ...internship, startDate: value }));
    const [endDate, setEndDate] = useProxyState<Moment | null>(internship.endDate, value => onChange({ ...internship, endDate: value }));

    const [overrideHours, setHoursOverride] = useState<number | null>(null)
    const [workingHours, setWorkingHours] = useState<number>(40)

    const computedHours = useMemo(() => startDate && endDate && computeWorkingHours(startDate, endDate, workingHours / 5), [startDate, endDate, workingHours]);

    const hours = useMemo(() => overrideHours !== null ? overrideHours : computedHours || null, [overrideHours, computedHours]);
    const weeks = useMemo(() => hours !== null ? Math.floor(hours / 40) : null, [ hours ]);

    useEffect(() => onChange({ ...internship, hours }), [hours])

    return (
        <Grid container>
            <Grid item md={ 6 }>
                <DatePicker value={ startDate } onChange={ setStartDate }
                            format="DD MMMM yyyy"
                            clearable disableToolbar fullWidth
                            variant="inline" label={ "Data rozpoczęcia praktyki" }
                />
            </Grid>
            <Grid item md={ 6 }>
                <DatePicker value={ endDate } onChange={ setEndDate }
                            format="DD MMMM yyyy"
                            clearable disableToolbar fullWidth
                            variant="inline" label={ "Data zakończenia praktyki" }
                            minDate={ startDate || moment() }
                />
            </Grid>
            <Grid item md={ 4 }>
                <FormControl fullWidth>
                    <InputLabel>Wymiar etatu</InputLabel>
                    <Input value={ workingHours }
                           onChange={ ev => setWorkingHours(parseInt(ev.target.value) || 0) }
                           fullWidth
                    />
                    <FormHelperText>Liczba godzin w tygodniu roboczym</FormHelperText>
                </FormControl>
            </Grid>
            <Grid item md={ 4 }>
                <FormControl fullWidth>
                    <InputLabel>Łączna liczba godzin</InputLabel>
                    <Input value={ hours || "" }
                           onChange={ ev => setHoursOverride(parseInt(ev.target.value) || 0) }
                           fullWidth
                    />
                </FormControl>
            </Grid>
            <Grid item md={ 4 }>
                <FormControl fullWidth>
                    <InputLabel>Liczba tygodni</InputLabel>
                    <Input value={ weeks || "" }
                           disabled
                           fullWidth
                    />
                    <FormHelperText>Wyliczona automatycznie</FormHelperText>
                </FormControl>
            </Grid>
        </Grid>
    );
}

export const InternshipForm: React.FunctionComponent<InternshipFormProps> = props => {
    const initialInternshipState = useSelector<AppState, Nullable<Internship>>(state => getInternshipProposal(state.proposal) || { ...emptyInternship, intern: sampleStudent });

    const [internship, setInternship] = useState<Nullable<Internship>>(initialInternshipState)
    const { t } = useTranslation();

    const dispatch = useDispatch();
    const history = useHistory();

    const handleSubmit = () => {
        dispatch({ type: InternshipProposalActions.Send, internship: internship as Internship });
        history.push(route("home"))
    }

    return (
        <div className="internship-form">
            <Typography variant="h3" className="section-header">Dane osoby odbywającej praktykę</Typography>
            <StudentForm student={ sampleStudent }/>
            <Typography variant="h3" className="section-header">Rodzaj i program praktyki</Typography>
            <InternshipProgramForm internship={ internship } onChange={ setInternship }/>
            <Typography variant="h3" className="section-header">Czas trwania praktyki</Typography>
            <InternshipDurationForm internship={ internship } onChange={ setInternship }/>
            <Typography variant="h3" className="section-header">Miejsce odbywania praktyki</Typography>
            <CompanyForm internship={ internship } onChange={ setInternship }/>
            <Actions>
                <Button variant="contained" color="primary" onClick={ handleSubmit }>{ t("confirm") }</Button>

                <Button component={ RouterLink } to={ route("home") }>
                    { t('go-back') }
                </Button>
            </Actions>
        </div>
    )
}