friday-2023.09.15.tsx

import React from "react";
import {
  SafeAreaView,
  ScrollView,
  View,
  Image,
  StyleSheet,
  Text,
  useWindowDimensions,
  ImageSourcePropType,
  StyleProp,
} from "react-native";

const classicMetalImages = [
  require(`../assets/images/music/classic-metal/classic-metal-0.png`),
  require(`../assets/images/music/classic-metal/classic-metal-9.png`),
  require(`../assets/images/music/classic-metal/classic-metal-8.png`),
  require(`../assets/images/music/classic-metal/classic-metal-1.png`),
  require(`../assets/images/music/classic-metal/classic-metal-4.png`),
  require(`../assets/images/music/classic-metal/classic-metal-5.png`),
  require(`../assets/images/music/classic-metal/classic-metal-2.png`),
  require(`../assets/images/music/classic-metal/classic-metal-3.png`),
  require(`../assets/images/music/classic-metal/classic-metal-6.png`),
  require(`../assets/images/music/classic-metal/classic-metal-7.png`),
];

const classicRockImages = [
  require(`../assets/images/music/classic-rock/classic-rock-0.png`),
  require(`../assets/images/music/classic-rock/classic-rock-1.png`),
  require(`../assets/images/music/classic-rock/classic-rock-4.png`),
  require(`../assets/images/music/classic-rock/classic-rock-10.png`),
  require(`../assets/images/music/classic-rock/classic-rock-2.png`),
  require(`../assets/images/music/classic-rock/classic-rock-3.png`),
  require(`../assets/images/music/classic-rock/classic-rock-5.png`),
  require(`../assets/images/music/classic-rock/classic-rock-6.png`),
  require(`../assets/images/music/classic-rock/classic-rock-7.png`),
  require(`../assets/images/music/classic-rock/classic-rock-8.png`),
  require(`../assets/images/music/classic-rock/classic-rock-9.png`),
];

const folkImages = [
  require(`../assets/images/music/folk/folk-0.png`),
  require(`../assets/images/music/folk/folk-1.png`),
  require(`../assets/images/music/folk/folk-2.png`),
  require(`../assets/images/music/folk/folk-3.png`),
  require(`../assets/images/music/folk/folk-4.png`),
  require(`../assets/images/music/folk/folk-5.png`),
  require(`../assets/images/music/folk/folk-6.png`),
  require(`../assets/images/music/folk/folk-7.png`),
  require(`../assets/images/music/folk/folk-8.png`),
  require(`../assets/images/music/folk/folk-9.png`),
];

const ScrollChild = ({
  width,
  imgWidth,
  height,
  containerStyle,
  uri,
}: {
  width: number;
  imgWidth: number;
  height: number;
  containerStyle?: StyleProp<any>;
  uri: ImageSourcePropType;
}) => (
  <View
    style={[
      {
        width: width,
        height: height,
      },
      containerStyle,
    ]}
  >
    <Image source={uri} style={{ flex: 1, width: imgWidth }} />
  </View>
);

const HorizontalScrollView = () => {
  const { width } = useWindowDimensions();

  const ScrollChildrenFullWidthClassicRock = classicRockImages.map(
    (imageUri) => {
      return (
        <ScrollChild
          key={imageUri}
          height={400}
          width={width}
          imgWidth={width}
          uri={imageUri}
        />
      );
    }
  );

  const ScrollChildrenSmallClassicMetal = classicMetalImages.map((imageUri) => {
    return (
      <ScrollChild
        key={imageUri}
        height={width * 0.4}
        width={width * 0.4}
        imgWidth={width * 0.4 - 10}
        containerStyle={{ paddingHorizontal: 5 }}
        uri={imageUri}
      />
    );
  });

  const ScrollChildrenCenterFolk = folkImages.map((imageUri) => {
    return (
      <ScrollChild
        key={imageUri}
        height={width * 0.8}
        width={width * 0.8}
        imgWidth={width * 0.8 - 10}
        containerStyle={{
          paddingHorizontal: 5,
        }}
        uri={imageUri}
      />
    );
  });

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={{ flex: 1 }}>
        <Text style={styles.heading}>Folk</Text>
        <ScrollView
          snapToInterval={width * 0.8}
          horizontal
          decelerationRate={"fast"}
        >
          {<View style={{ width: width * 0.1 }} />}
          {ScrollChildrenCenterFolk}
          {<View style={{ width: width * 0.1 }} />}
        </ScrollView>

        <Text style={styles.heading}>Classic Metal</Text>
        <ScrollView horizontal>{ScrollChildrenSmallClassicMetal}</ScrollView>

        <Text style={styles.heading}>Classic Rock</Text>
        <ScrollView pagingEnabled horizontal>
          {ScrollChildrenFullWidthClassicRock}
        </ScrollView>

      </ScrollView>
    </SafeAreaView>
  );
};

export default HorizontalScrollView;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#222233",
  },
  heading: {
    color: "#EEFFFF",
    fontSize: 36,
    fontWeight: "bold",
    margin: 10,
    marginTop: 20,
  },
});