// Custom and reusable component for the onboard screen
//
// Props:
// - data: array of objects with the following properties:
//   - title: string
//   - subTitle: string
//   - image: object
//   - backgroundColor: string
// - onDone: function

// - This onboard screen has:
//   - a title
//   - a subtitle
//   - an image
//   - a done button
//   - a next button
//   - an indicator to show the current slide

import React, { useState, useEffect, useRef } from 'react'
import { StyleSheet, View, Dimensions, ScrollView } from 'react-native'
import { colors, screens, spacing } from '../theme'
import Button from './Button'
import Icon from './Icon'
import { MaterialIcons } from '@expo/vector-icons'
import { i18n } from '../../../src/store/languageSlice'
import Image from './Image'
import Text from './Text'
import Paper from './Paper'
import { WIDTH } from '../utils'

const Onboard = ({
  data,
  onDone,
  titleStyle,
  subTitleStyle,
  imageStyle,
  indicatorStyle,

  indicatorActiveStyle,
  buttonStyle,
}) => {
  const [currentSlide, setCurrentSlide] = useState(0)
  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)
  const scrollView = useRef(null)

  const configStyle = {
    titleStyle: titleStyle || {
      fontSize: 24,
      fontWeight: 'bold',
      color: colors.n_900,
      textAlign: 'center',
    },
    subTitleStyle: subTitleStyle || {
      fontSize: 16,
      color: colors.n_700,
    },
    imageStyle: imageStyle || {
      width: 200,
      height: 200,
    },
    indicatorStyle: indicatorStyle || {
      width: 10,
      height: 10,
      borderRadius: 5,
      backgroundColor: colors.n_300,
      marginHorizontal: 5,
    },
    indicatorActiveStyle: indicatorActiveStyle || {
      backgroundColor: colors.primary,
      width: 25,
      height: 7,
    },
    buttonStyle: buttonStyle || {
      backgroundColor: colors.primary,
    },
  }
  useEffect(() => {
    const { width, height } = Dimensions.get('window')
    setWidth(width)
    setHeight(height)
  }, [])

  const handleNext = () => {
    if (currentSlide < data.length - 1) {
      setCurrentSlide(currentSlide + 1)
      scrollView.current.scrollTo({
        x: width * (currentSlide + 1),
        animated: true,
      })
    } else {
      onDone()
    }
  }

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={configStyle.titleStyle}>{i18n.t(data[currentSlide].title)}</Text>
        <Text style={configStyle.subTitleStyle}>
          {
            i18n.t(data[currentSlide].subTitle)
          }
        </Text>
      </View>
      <View style={styles.body}>
        <ScrollView
          ref={scrollView}
          horizontal
          pagingEnabled
          showsHorizontalScrollIndicator={false}
          onMomentumScrollEnd={(e) => {
            const slide = Math.round(e.nativeEvent.contentOffset.x / width)
            setCurrentSlide(slide)
          }}
        >
          {data.map((item, index) => (
            <Paper
              align='center'
              key={index}
              style={{
                width: WIDTH + screens.paddingHorizontal * 2,
              }}
            >
              <Image
                resizeMode='contain'
                source={`http://165.22.31.175:5000/public/file_store/images/graphics/${item.image}`}
                height={60}
                width={60}
                // mx={4}
                style={configStyle.imageStyle}
              />
            </Paper>
          ))}
        </ScrollView>
      </View>
      <View style={styles.footer}>
        <View style={styles.indicatorContainer}>
          {data.map((item, index) => (
            <View
              key={index}
              style={[
                configStyle.indicatorStyle,
                currentSlide === index && configStyle.indicatorActiveStyle,
              ]}
            />
          ))}
        </View>
        <View style={styles.buttonContainer}>
          <Button mt={16} onPress={handleNext} style={configStyle.buttonStyle}>
            {currentSlide === data.length - 1 ? 'Done' : i18n.t('next')}
          </Button>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.white,
  },
  header: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: spacing.s_4,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: colors.dark,
    textAlign: 'center',
  },
  subTitle: {
    fontSize: 16,
    color: colors.n_900,
    textAlign: 'center',
    marginTop: spacing.s_2,
  },
  body: {
    flex: 2.5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    flex: 0.5,
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingBottom: spacing.s_5,
  },
  indicatorContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  indicator: {
    width: 10,
    height: 10,
    borderRadius: 5,
    marginHorizontal: spacing.s_1,
    backgroundColor: colors.n_300,
  },
  indicatorActive: {
    backgroundColor: colors.primary,
    width: 20,
    height: 5,
    borderRadius: 5,
  },
  buttonContainer: {
    width: '100%',
    paddingHorizontal: spacing.s_4,
  },
})

export default Onboard