import React from 'react';
import { DatePicker, Form } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import type { FormItemProps } from 'antd/es/form';
import { DATE_FORMAT_BR_MASK, withAntdDateInputMask } from '@/lib/format/antdDateFormat';

const { RangePicker } = DatePicker;

interface FormRangePickerProps extends Omit<RangePickerProps, 'name'> {
    name: string | (string | number)[];
    label?: string;
    required?: boolean;
    help?: string;
    /** String dayjs ou objeto com `type: 'mask'` (padrão: máscara DD/MM/YYYY). */
    format?: RangePickerProps['format'];
    showTime?: boolean;
    placeholder?: [string, string];
    rules?: FormItemProps['rules'];
}

export default function FormRangePicker({
    name,
    label,
    required = false,
    help,
    format = DATE_FORMAT_BR_MASK,
    showTime = false,
    placeholder = ['Data inicial', 'Data final'],
    rules,
    ...rangePickerProps
}: FormRangePickerProps) {
    const formRules = required
        ? [{ required: true, message: `${label || 'Campo'} é obrigatório` }, ...(rules || [])]
        : rules;

    const resolvedFormat =
        typeof format === 'string' ? withAntdDateInputMask(format) : format;

    return (
        <Form.Item name={name} label={label} rules={formRules} help={help}>
            <RangePicker
                format={resolvedFormat}
                showTime={showTime}
                placeholder={placeholder}
                style={{ width: '100%' }}
                {...rangePickerProps}
            />
        </Form.Item>
    );
}