import React from 'react';

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

import { skipTaggingForLongClipsSelector } 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 { Switch } from '@/mui/components';

type PropTypes = {
  disabled?: boolean;
};

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

  const skipTaggingForLongClips = useAppSelector(skipTaggingForLongClipsSelector);

  return (
    <Switch
      data-id="skipTaggingForLongClips"
      size={size as GeneralSizeProp}
      color="primary"
      checked={skipTaggingForLongClips}
      disabled={disabled}
      onChange={(e) => dispatch(setAction({ skipTaggingForLongClips: e.target.checked }))}
    />
  );
}

export default SkipTaggingForLongClips;
