import React, { ReactElement, useState } from 'react'
import styles from './styles'
import { SafeAreaView, ScrollView, Text, View } from 'react-native'
import i18n from 'i18n-js'
import Cell from './components/cell/Cell'
import Modal from 'react-native-modal'
import Button from '../../components/button/Button'
import { colors } from '../../assets/colors'
import { inject, observer } from 'mobx-react'
import ProgramsStore from '../../store/ProgramsStore'
import SelectProgramModal from '../select_program/SelectProgramModal'
import { testIDs } from '../../../e2e/testIDs'

const ANIMATION_MSEC = 400

interface Props {
    isVisible: boolean
    initialFrom: Date
    initialTo: Date
    initialProgramIndex: number
    onSelectPress?: (from: Date, to: Date, programIndex: number) => void
    onCancel?: () => void
    programsStore?: ProgramsStore
}
const defaultProps: Props = {
    isVisible: false,
    initialProgramIndex: 0,
    initialFrom: new Date(),
    initialTo: new Date(),
}

const FilterModal = ({
    isVisible,
    initialFrom,
    initialTo,
    initialProgramIndex,
    onSelectPress,
    onCancel,
    programsStore: { programsResponse },
}: Props): ReactElement => {
    const [from, setFrom] = useState<Date>(initialFrom)
    const [to, setTo] = useState<Date>(initialTo)
    const [programIndex, setProgramIndex] = useState<number>(initialProgramIndex)
    const [selectProgramVisible, setSelectProgramVisible] = useState<boolean>(false)
    const [fromExpanded, setFromExpanded] = useState<boolean>(false)
    const [toExpanded, setToExpanded] = useState<boolean>(false)
    const handleCancelPress = () => onCancel && onCancel()
    const handleSelectPress = () => onSelectPress && onSelectPress(from, to, programIndex)
    const handleSavePress = (selectedIndex: number) => {
        setProgramIndex(selectedIndex)
        setSelectProgramVisible(false)
    }
    const handleProgramPress = () => setSelectProgramVisible(true)
    const handleProgramCancelPress = () => setSelectProgramVisible(false)
    const { programTitle } = programsResponse[programIndex]
    const handleToPress = () => {
        setFromExpanded(!toExpanded ? toExpanded : false)
        setToExpanded(!toExpanded)
    }
    const handleFromPress = () => {
        setFromExpanded(!fromExpanded)
        setToExpanded(!fromExpanded ? fromExpanded : false)
    }
    return (
        <Modal
            animationInTiming={ANIMATION_MSEC}
            animationOutTiming={ANIMATION_MSEC}
            backdropTransitionOutTiming={ANIMATION_MSEC}
            backdropTransitionInTiming={ANIMATION_MSEC}
            animationIn={'slideInUp'}
            animationOut={'slideOutDown'}
            backdropColor={colors.brown_1}
            backdropOpacity={0.5}
            onBackButtonPress={handleCancelPress}
            onBackdropPress={handleCancelPress}
            propagateSwipe={true}
            style={styles.modal}
            isVisible={isVisible}>
            <SafeAreaView style={styles.container}>
                <ScrollView testID={testIDs.filter.scrollContainer}>
                    <Text style={styles.title}>{i18n.t('Filter by date')}</Text>
                    <View style={styles.itemsContainer}>
                        <Cell
                            testID={testIDs.filter.from}
                            type={'from'}
                            title={i18n.t('From')}
                            date={from}
                            onPress={handleFromPress}
                            onDateChange={setFrom}
                            expanded={fromExpanded}
                        />
                        <Cell
                            testID={testIDs.filter.to}
                            onPress={handleToPress}
                            type={'to'}
                            title={i18n.t('To')}
                            date={to}
                            onDateChange={setTo}
                            expanded={toExpanded}
                        />
                    </View>
                    <Text style={styles.title}>{i18n.t('Select program')}</Text>
                    <View style={styles.itemsContainer}>
                        <Cell
                            testID={testIDs.filter.program}
                            type={'program'}
                            title={programTitle}
                            onPress={handleProgramPress}
                        />
                    </View>
                    <View style={styles.selectContainer}>
                        <Button
                            testID={testIDs.filter.select}
                            text={i18n.t('Select')}
                            onPress={handleSelectPress}
                        />
                    </View>
                </ScrollView>
            </SafeAreaView>
            <SelectProgramModal
                isVisible={selectProgramVisible}
                onBackPress={handleProgramCancelPress}
                initialIndex={programIndex}
                onSavePress={handleSavePress}
            />
        </Modal>
    )
}
FilterModal.defaultProps = defaultProps

export default inject('programsStore')(observer(FilterModal))