/**
 * Component for render list of date templates
 *
 * @author Fedorov Platon
 * @date 2021-06-25
 */

import React from 'react';
import * as styles from './datePicker.m.scss';
import {Button} from '../button/Button';
import {INTENT} from '../../constants';
import moment from 'moment';

export type TemplateDate = string | moment.Moment | [string, string] | [moment.Moment, moment.Moment];

export interface IDateTemplate {
    date: TemplateDate;
    name: string;
}

interface IProps {
    dates: IDateTemplate[];
    onClick: (date: TemplateDate) => void;
    isDisabled?: boolean;
}

export class AdditionalTemplates extends React.PureComponent<IProps> {
    onClick = (date: TemplateDate) => () => {
        this.props.onClick(date);
    }
    override render () {
        if (this.props.dates.length === 0) {
            return null;
        }

        return (
            <div className={styles.dateTemplatesContainer}>
                {
                    this.props.dates.map((template, index) => {
                        return (
                            <Button
                                key={index}
                                intent={INTENT.PRIMARY}
                                onClick={this.onClick(template.date)}
                                isDisabled={this.props.isDisabled}
                            >
                                {template.name}
                            </Button>
                        );
                    })
                }
            </div>
        );
    }
}