import React from 'react';

import {
  FILE_SELECTION_BITRATE,
  FILE_SELECTION_NONE,
  FILE_SELECTION_RESOLUTION,
} from '@/modules/feeds/Editor/constants';

import { fileSelectionSelector } from '@/modules/feeds/Editor/redux/selectors';

import { FormRow } from '@/modules/@common/Form';
import { useAppSelector } from '@/modules/@common/store/hooks';
import AspectRatio from '@/modules/feeds/Editor/components/FormElements/AspectRatio/AspectRatio';
import Bitrate from '@/modules/feeds/Editor/components/FormElements/Bitrate/Bitrate';
import FileSelection from '@/modules/feeds/Editor/components/FormElements/FileSelection/FileSelection';
import Fit from '@/modules/feeds/Editor/components/FormElements/Fit/Fit';
import MaxStories from '@/modules/feeds/Editor/components/FormElements/MaxStories/MaxStories';
import MinBitrate from '@/modules/feeds/Editor/components/FormElements/MinBitrate/MinBitrate';
import MinResolutionValue from '@/modules/feeds/Editor/components/FormElements/MinResolutionValue/MinResolutionValue';
import Resolution from '@/modules/feeds/Editor/components/FormElements/Resolution/Resolution';
import ResolutionValue from '@/modules/feeds/Editor/components/FormElements/ResolutionValue/ResolutionValue';
import VideoDuration from '@/modules/feeds/Editor/components/FormElements/VideoDuration/VideoDuration';
import VideoFileType from '@/modules/feeds/Editor/components/FormElements/VideoFileType/VideoFileType';
import VideoMaxZoom from '@/modules/feeds/Editor/components/FormElements/VideoMaxZoom/VideoMaxZoom';

function AdvancedTab() {
  const fileSelection = useAppSelector(fileSelectionSelector);
  return (
    <>
      <FormRow label="Maximum Stories">
        <MaxStories />
      </FormRow>
      <FormRow label="Video Duration (seconds)">
        <VideoDuration />
      </FormRow>
      <FormRow label="Aspect Ratio">
        <AspectRatio />
      </FormRow>
      <FormRow label="Fit">
        <Fit />
      </FormRow>
      <FormRow label="Video Max Zoom (%)">
        <VideoMaxZoom />
      </FormRow>
      <FormRow label="Video File Types">
        <VideoFileType />
      </FormRow>
      <FormRow label="File Selection">
        <FileSelection />
      </FormRow>
      {fileSelection !== FILE_SELECTION_NONE && (
        <>
          {fileSelection === FILE_SELECTION_RESOLUTION && (
            <>
              <FormRow label="Resolution">
                <Resolution />
              </FormRow>
              <FormRow label="Preferred Resolution">
                <ResolutionValue />
              </FormRow>
              <FormRow label="Minimum Resolution">
                <MinResolutionValue />
              </FormRow>
            </>
          )}

          {fileSelection === FILE_SELECTION_BITRATE && (
            <>
              <FormRow label="Preferred bps">
                <Bitrate />
              </FormRow>
              <FormRow label="Minimum bps">
                <MinBitrate />
              </FormRow>
            </>
          )}
        </>
      )}
    </>
  );
}

export default AdvancedTab;
