import React from "react";

// local components
import { Select } from "../select";

// local files
import { useDateOfBirth } from "./date_of_birth.hook";
import { useStyles } from "./styles";

interface DateOfBirthProps {
    date: number,
    onDateChanged: (x: number | null) => {},
    itemClass?: string,
    rootClass?: string,
    monthIptProps?: object,
    dayIptProps?: object,
    yearIptProps?: object,
    lang?: string
}

export const DateOfBirth = ({
    date, onDateChanged, rootClass, itemClass,
    monthIptProps, dayIptProps, yearIptProps,
    lang
}: DateOfBirthProps) => {
    const { selectItem } = useStyles();
    const {
        months, years, days,
        day, year, month,
        handleChooseDay,
        handleChooseMonth,
        handleChooseYear
    } = useDateOfBirth(date, onDateChanged, lang);

    const selectItemClass = `${selectItem} ${itemClass || ''}`

    return (
        <div className={rootClass || ''}>
            <Select
                rootClassName={selectItemClass}
                onChange={handleChooseMonth}
                value={month}
                placeholder="Month"
                options={months}
                {...monthIptProps}
            />
            <Select
                rootClassName={selectItemClass}
                onChange={handleChooseDay}
                value={day} placeholder="Day"
                options={days}
                {...dayIptProps}
            />
            <Select
                rootClassName={selectItemClass}
                onChange={handleChooseYear}
                value={year}
                placeholder="Year"
                options={years}
                {...yearIptProps}
            />
        </div>
    )
}
