import React, { useRef } from 'react';
import * as S from './style';
import { IDatepicker } from './types';
import Input from '../input';
import { useStore, useClickOutSide } from 'utils/hooks';

export const Datepicker = function({ width, mode, onChange, placeholder = '请选择日期', ...rest }: IDatepicker) {
    const [{ open }, dispatch] = useStore({
        open: false,
    });
    const ref = useRef<HTMLDivElement>(null);
    useClickOutSide(ref, () => {
        dispatch({ open: false });
    });
    return (
        <S.Wrapper {...rest} ref={ref}>
            <Input
                icon="Calendar"
                placeholder={placeholder}
                width={width}
                onClick={() => {
                    dispatch({ open: !open });
                }}
            />
            {open && <S.Popup />}
        </S.Wrapper>
    );
};
Datepicker.defaultProps = {};
export default Datepicker;