import React, { useContext, useState } from 'react'
import {
  Pressable,
  StyleProp,
  Text,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { ArtistContext } from '../contexts/ArtistContext'
import { UserContext } from '../contexts/UserContext'
import { Strings } from '../i18n'
import { SearchIcon } from '../icons/SearchIcon'
import TriangleDown from '../icons/TriangleDown'
import {
  TimeInterval,
  timeIntervals,
  timeIntervalStringLong,
} from '../types/TimeInterval'
import { timeRangeInterval } from '../util'
import { formatInterval } from '../util/date'
import { ArtistImage } from './ArtistImage'
import { AutoLayout } from './AutoLayout'
import { useScreenName } from './CommonScreenContainer'
import { HeaderContextMenu } from './HeaderContextMenu'
import { TimeIntervalSelectorModal } from './TimeIntervalSelectorModal'

const TimeIntervalSelectorButton: React.FC<{
  selectedTimeInterval: TimeInterval
  onPress?: () => void
  style?: StyleProp<ViewStyle>
}> = ({ selectedTimeInterval, onPress, style }) => {
  const activeIntervalLabel = timeIntervalStringLong[selectedTimeInterval]

  return (
    <View style={style}>
      <TouchableOpacity
        disabled={onPress == null}
        onPress={onPress}
        style={{ flexDirection: 'row', alignItems: 'center' }}
        accessibilityLabel={Strings.Shared.SelectTimeInterval}
        accessibilityRole="menu"
        accessibilityValue={{ text: activeIntervalLabel }}
      >
        <Text style={[TextStyles.body, { color: colors.white }]}>
          {formatInterval(timeRangeInterval(selectedTimeInterval), 'long')}
        </Text>
        {onPress != null && <TriangleDown style={{ marginLeft: 10 }} />}
      </TouchableOpacity>
    </View>
  )
}

export const ArtistSwitcher: React.FC<{
  style?: StyleProp<ViewStyle>
}> = ({ style }) => {
  const user = useContext(UserContext)
  const artist = useContext(ArtistContext)

  return (
    <View
      style={[
        {
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          flex: 1,
        },
        style,
      ]}
    >
      <TouchableOpacity
        style={{
          flexDirection: 'row',
          alignItems: 'center',
        }}
        accessibilityLabel={Strings.Shared.SwitchArtist}
        accessibilityRole="menu"
        accessibilityValue={{ text: artist.name }}
        onPress={() => user.setLastUsedArtistId(null)}
      >
        <ArtistImage
          artist={artist}
          size={48}
          style={{
            borderWidth: 2,
            borderColor: colors.metals.metal1,
            marginRight: 16,
          }}
        />
        <AutoLayout
          gap={16}
          style={{ flexDirection: 'row', flex: 1, alignItems: 'center' }}
        >
          <Text
            style={[TextStyles.h4, { color: colors.white }]}
            ellipsizeMode="tail"
            numberOfLines={1}
          >
            {artist.name}
          </Text>
          <TriangleDown />
        </AutoLayout>
      </TouchableOpacity>
    </View>
  )
}

/**
 * https://www.figma.com/file/WFPSIP1LYbEnpNJo4MXndO/3.0-APP-Design?node-id=23%3A2069
 */
export const ArtistHeader: React.FC<{
  onPressSearchButton: () => void
  timeInterval?: TimeInterval
  setTimeInterval?: (timeInterval: TimeInterval) => void
}> = ({ timeInterval, setTimeInterval, onPressSearchButton }) => {
  const [timeSelectorModalIsOpen, setTimeSelectorModalIsOpen] =
    useState<boolean>(false)
  const { screenName } = useScreenName()

  return (
    <AutoLayout
      gap={9}
      style={{
        padding: 16,
        paddingTop: 10,
      }}
    >
      <AutoLayout
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
        gap={40}
      >
        <ArtistSwitcher />
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <Pressable
            onPress={onPressSearchButton}
            style={{ padding: 4 }}
            accessibilityLabel={Strings.Shared.Search}
          >
            <SearchIcon />
          </Pressable>
          <HeaderContextMenu screenName={screenName} />
        </View>
      </AutoLayout>
      {timeInterval != null ? (
        <>
          {setTimeInterval != null && (
            <TimeIntervalSelectorModal
              isOpen={timeSelectorModalIsOpen}
              setIsOpen={setTimeSelectorModalIsOpen}
              timeInterval={timeInterval}
              setTimeInterval={setTimeInterval}
              timeIntervals={timeIntervals}
            />
          )}
          <TimeIntervalSelectorButton
            selectedTimeInterval={timeInterval}
            onPress={
              setTimeInterval != null
                ? () => setTimeSelectorModalIsOpen(true)
                : undefined
            }
          />
        </>
      ) : (
        <View />
      )}
    </AutoLayout>
  )
}