import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { Trans } from '@lingui/macro';
import React from 'react';
import moment, { Moment } from 'moment';

type PickerProps = {
  onChange: (m, s) => void;
  value: Moment;
};
const Picker: React.FC<PickerProps> = ({ onChange, value }) => {
  const InvalidDateMessage = <Trans>Invalid date format</Trans>;
  const MaxDateMessage = <Trans>Date should not be after maximal date</Trans>;
  const Label = <Trans>Date / Time (yyyy/mm/dd hh:mm)</Trans>;
  const now = moment();

  return (
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <DateTimePicker
        label={Label}
        disableFuture={true}
        ampm={false}
        value={value}
        onChange={onChange}
        format={'YYYY/MM/DD HH:mm'}
        slotProps={{
            textField: {
                fullWidth: true,
                helperText: value && !moment(value).isValid() ? InvalidDateMessage
                    : value && moment(value).isAfter(now) ? MaxDateMessage
                        : '',
                variant: 'standard',
            }
        }}
      />
    </LocalizationProvider>
  );
};

export default Picker;