import React from 'react';

import { CONTENT_TYPE_OPTIONS, CONTENT_TYPE_VIDEO } from '@/modules/feeds/Editor/constants';

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

import { contentTypeSelector, importShortsThumbnailSelector } 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 { MenuItem, Select } from '@/mui/components';

type PropTypes = {
  disabled?: boolean;
};

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

  const contentType = useAppSelector(contentTypeSelector);
  const importShortsThumbnail = useAppSelector(importShortsThumbnailSelector);

  return (
    <Select
      // placeholder="Content Type"
      size={size as GeneralSizeProp}
      value={contentType}
      disabled={disabled}
      onChange={(e) =>
        dispatch(
          setAction({
            contentType: e.target.value as typeof contentType,
            importShortsThumbnail: contentType === CONTENT_TYPE_VIDEO ? false : importShortsThumbnail,
          }),
        )
      }
    >
      {CONTENT_TYPE_OPTIONS.map((option) => (
        <MenuItem key={option.value} value={option.value}>
          {option.label}
        </MenuItem>
      ))}
    </Select>
  );
}

export default ContentType;
