import React from "react";
import { Dimensions, StatusBar, Image, StyleSheet } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useTheme } from "@shopify/restyle";

import { Box, Text, Dot, Button, Icons, Theme } from "../../components";
import { Images } from "../../constants";

const { width } = Dimensions.get("window");

const styles = StyleSheet.create({
  arrowButton: {
    width: 52,
    height: 52,
    borderRadius: 26,
    justifyContent: "center",
    alignItems: "center",
    marginRight: 10,
  },
});

const OnBoarding = () => {
  const insets = useSafeAreaInsets();
  const theme = useTheme<Theme>();

  return (
    <Box width={width} backgroundColor="white">
      <StatusBar barStyle="dark-content" />
      <Box flex={1} paddingHorizontal="m" style={{ paddingTop: insets.top }}>
        <Box flex={0.5} alignItems="center">
          <Box marginTop="m">
            <Image source={Images.IMG1} />
          </Box>
        </Box>
        <Box flex={0.5} padding="l" justifyContent="space-between">
          <Box marginTop="xl">
            <Text variant="title1" fontSize={32} lineHeight={40}>
              Meet Up UI-Kit
            </Text>
            <Text variant="text1" lineHeight={23} color="gray500" marginTop="l">
              When I was 5 years old, my mother always told me that happiness
              was the key to life. When I went to school, they asked me what I
              wanted to be when I grew up.
            </Text>
          </Box>
          <Box
            flexDirection="row"
            justifyContent="space-between"
            alignItems="center"
            marginBottom="xl"
          >
            <Box flexDirection="row">
              {Array(4)
                .fill(0)
                .map((_, index) => (
                  <Dot
                    key={index}
                    width={8}
                    height={8}
                    borderRadius={4}
                    backgroundColor="lightBlueMagenta400"
                    opacity={index === 0 ? 1 : 0.4}
                    style={{ margin: 2 }}
                  />
                ))}
            </Box>
            <Box flexDirection="row">
              <Button
                style={[
                  styles.arrowButton,
                  {
                    backgroundColor: theme.colors.lightBlue300,
                  },
                ]}
              >
                <Box flex={1} justifyContent="center" alignItems="center">
                  <Icons.ArrowLeft strokeColor="white" />
                </Box>
              </Button>
              <Button
                style={[
                  styles.arrowButton,
                  {
                    backgroundColor: theme.colors.lightBlueMagenta400,
                  },
                ]}
              >
                <Box marginTop="s" marginLeft="s">
                  <Icons.ArrowRight fillColor="white" width={30} height={30} />
                </Box>
              </Button>
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

export default OnBoarding;