import { Fragment } from 'react'

import styled from 'styled-components/macro'

import isEqual from 'lodash/isEqual'

import type { Settings } from 'features/MatchPopup'
import { PlayerPlaylistFormats } from 'features/MatchPopup'
import { ButtonSolid } from 'features/Common'
import { T9n } from 'features/T9n'
import { PlaylistFormats } from 'features/MatchPopup/components/PlaylistFormats'
import { EpisodeDurationInputs } from 'features/MatchPopup/components/EpisodeDurationInputs'
import { PlayerActions } from 'features/MatchPopup/components/PlayerActions'

import { useSettingsDesktop } from './useDesktopSettings'

const ButtonsWrapper = styled.div`
  display: flex;
  justify-content: center;
  margin: 45px 0 15px 0;
`

const WatchButton = styled(ButtonSolid)`
  width: auto;
  padding: 0 20px;
`

type Props = {
  isMatchPlaylist?: boolean,
  onWatchEpisodesClick: (values: Settings) => void,
}

export const SettingsDesktop = ({
  isMatchPlaylist,
  onWatchEpisodesClick,
}: Props) => {
  const {
    actions,
    localSettings,
    onActionsChange,
    onEpisodeDurationsChange,
    onPlaylistFormatChange,
    settings,
  } = useSettingsDesktop()
  const {
    episodeDuration,
    selectedActions,
    selectedFormat,
  } = localSettings
  const marginTop = isMatchPlaylist ? 0 : 62
  return (
    <Fragment>
      <PlaylistFormats
        marginTop={marginTop}
        selectedFormat={selectedFormat}
        onFormatSelect={onPlaylistFormatChange}
      />
      <EpisodeDurationInputs
        value={episodeDuration}
        onChange={onEpisodeDurationsChange}
      />
      {selectedFormat === PlayerPlaylistFormats.SELECTED_ACTIONS && (
        <PlayerActions
          actions={actions}
          onActionClick={onActionsChange}
          selectedActions={selectedActions}
        />
      )}
      <ButtonsWrapper>
        <WatchButton
          disabled={isEqual(localSettings, settings)}
          onClick={() => onWatchEpisodesClick(localSettings)}
        >
          {isMatchPlaylist
            ? <T9n t='save' />
            : <T9n t='watch_players_episodes' />}
        </WatchButton>
      </ButtonsWrapper>
    </Fragment>
  )
}
