spa_instat_tv/src/pages/HighlightsPage/components/FormHighlights/index.tsx

import { Combobox } from 'features/Combobox'
import { Input } from 'features/Common'
import { T9n } from 'features/T9n'
import { Icon } from 'features/Icon'

import { isMobileDevice } from 'config/userAgent'

import {
  useHighlightsForm,
} from './hooks'

import {
  ScWrapper,
  ScTitle,
  ScText,
  ScInputGroup,
  ScForm,
  ScInfoBlock,
  ScInfoWrap,
} from './styled'

import { PriceInfoType, PriceInfo } from '../PriceInfo'

const labelWidth = 100
const wrapperHeight = 50

export const FormHighlights = ({ price }: PriceInfoType) => {
  const {
    formRef,
    formState: {
      duration,
      playerValue,
      selectedPlayer,
      selectedSound,
      selectedTeam,
      sport,
      stats,
      teamValue,
    },
    isFetchingTeams,
    onChangeMaxDuration,
    onChangePlayer,
    onChangeTeam,
    onPlayerSelect,
    onSoundSelect,
    onSportSelect,
    onStatsSelect,
    onTeamSelect,
    players,
    sounds,
    sports,
    summaryStats,
    teams,
  } = useHighlightsForm()

  return (
    <ScWrapper>
      <ScInfoWrap>
        {isMobileDevice ? <PriceInfo price={price} /> : null}
        <ScInfoBlock>
          <ScTitle>
            <T9n t='choose_player' />
          </ScTitle>
          <ScText>
            <T9n t='purchase_auto_generated' /><br />
            <T9n
              t='highlight_will_be_generated'
              className='highlight_will_be_generated'
            />
          </ScText>
        </ScInfoBlock>
      </ScInfoWrap>
      <ScForm
        ref={formRef}
      >
        <ScInputGroup>
          <Combobox
            noSearch
            selected
            labelLexic='sport_highlight'
            labelWidth={labelWidth}
            value={sport?.name_eng || ''}
            onSelect={onSportSelect}
            options={sports}
            maxLength={500}
            withError={false}
            wrapperHeight={wrapperHeight}
          />
          <Combobox
            disabled={!sport || isFetchingTeams}
            selected={Boolean(selectedTeam?.name_eng)}
            labelLexic='team_highlight'
            labelWidth={labelWidth}
            value={selectedTeam?.name_eng || teamValue || ''}
            onSelect={onTeamSelect}
            onChange={onChangeTeam}
            options={teams}
            maxLength={500}
            withError={false}
            wrapperHeight={wrapperHeight}
            iconName='Search'
            className='FormHighlights__select__teams'
            loading={isFetchingTeams}
          />
          <Combobox
            disabled={!sport || !selectedTeam}
            selected
            labelLexic='player_highlight'
            labelWidth={labelWidth}
            value={selectedPlayer?.name || playerValue || ''}
            onSelect={onPlayerSelect}
            onChange={onChangePlayer}
            options={players}
            maxLength={500}
            withError={false}
            wrapperHeight={wrapperHeight}
            iconName='Search'
            className='FormHighlights__select__players'
          />
          <Input
            disabled={!sport}
            value={duration?.toString() || ''}
            labelLexic='maximal_duration'
            labelWidth={labelWidth}
            onChange={onChangeMaxDuration}
            maxLength={500}
            withError={false}
            wrapperHeight={wrapperHeight}
            labelAfter='min'
            className='FormHighlights__input__duration'
            required
          />
          <Combobox
            disabled={!sport}
            noSearch
            selected
            labelLexic='background_music'
            labelWidth={labelWidth}
            value={selectedSound?.name || ''}
            onSelect={onSoundSelect}
            options={sounds}
            maxLength={500}
            withError={false}
            wrapperHeight={wrapperHeight}
            labelAfter={<Icon refIcon='Sound' />}
            className='FormHighlights__input__sound'
          />
          <Combobox
            disabled={!sport}
            noSearch
            selected
            labelLexic='add_summary'
            labelWidth={labelWidth}
            value={stats?.name || ''}
            onSelect={onStatsSelect}
            options={summaryStats}
            maxLength={500}
            withError={false}
            wrapperHeight={wrapperHeight}
          />
        </ScInputGroup>
      </ScForm>
    </ScWrapper>
  )
}