import React from 'react';
import dayjs from 'dayjs';

import type { GeneralSizeProp } from '@/mui/types';

import { youTubeLoadFromDateSelector } from '@/modules/feeds/Editor/redux/selectors';
import { setAction } from '@/modules/feeds/Editor/redux/slices';

import { useFormSettings } from '@/modules/@common/Form';
import { useAppDispatch, useAppSelector } from '@/modules/@common/store/hooks';
import { DateTimePicker } from '@/mui/components';

type PropTypes = {
  disabled?: boolean;
};

function YouTubeLoadFromDate({ disabled = false }: PropTypes) {
  const dispatch = useAppDispatch();
  const { size } = useFormSettings();

  const youTubeLoadFromDate = useAppSelector(youTubeLoadFromDateSelector);

  return (
    <DateTimePicker
      value={dayjs(youTubeLoadFromDate ?? new Date())}
      format="MM/DD/YYYY"
      slotProps={{
        textField: {
          size: size as GeneralSizeProp,
        },
      }}
      disabled={disabled}
      onChange={(date) => dispatch(setAction({ youTubeLoadFromDate: dayjs(date).format('YYYY-MM-DD') }))}
    />
  );
}

export default YouTubeLoadFromDate;
