import React, { useContext } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { useFonts } from 'expo-font';
import { Txt6, Txt4 } from '@proximus/react-native-common-ui/lib/texts/Txt';
import { useTheme, Colors } from '@proximus/react-native-common-ui/lib/styling';
import { e2eID, a11y } from '@proximus/react-native-common-ui/lib/common/utils';

export default function App() {
  const loaded = useFonts({
    'Proximus-Bold': require('@proximus/react-native-font-icons/lib/assets/fonts/Proximus-Bold.ttf'),
  });

  if (!loaded) {
    return <View />;
  }

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Txt4>Brand colors</Txt4>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.brand.purple }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.brand.purple
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.brand.red }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.brand.red
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.brand.purple70 }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.brand.purple70
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.brand.blue }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.brand.blue
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.brand.darkBlue }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.brand.darkBlue
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.brand.green }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.brand.green
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.brand.orange }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.brand.orange
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.brand.pink }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.brand.pink
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.brand.turquoise },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.brand.turquoise
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.brand.yellow }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.brand.yellow
        </Txt6>
      </PxCard>

      <Txt4>Status colors</Txt4>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.status.error }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.status.error
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.status.order }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.status.order
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.status.success }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.status.success
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.status.toastError },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.status.toastError
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.status.validGreenPos },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.status.validGreenPos
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[{ backgroundColor: Colors.status.warning }, styles.card]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.status.warning
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.status.warningOrangePos },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.status.warningOrangePos
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.status.warningText },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.status.warningText
        </Txt6>
      </PxCard>
      <Txt4>Shades of grey</Txt4>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.white },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.white
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.black },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.black
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.black4 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.black4
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.black5 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.black5
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.black6 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.black6
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.blackOpacity6 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.blackOpacity6
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.black7 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.black7
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.black8 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.black8
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.black9 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.black9
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.black9Opacity6 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.black9Opacity6
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.grey },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.grey
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.grey1 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.grey1
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.grey2 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.grey2
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.grey3 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.grey3
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.grey4 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.grey4
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.grey5 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.grey5
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.grey6 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.grey6
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.grey7 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.grey7
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.grey8 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.grey8
        </Txt6>
      </PxCard>
      <PxCard
        wrapperStyle={[
          { backgroundColor: Colors.shadesOfGrey.grey9 },
          styles.card,
        ]}
      >
        <Txt6 style={{ color: Colors.shadesOfGrey.white }}>
          Colors.shadesOfGrey.grey9
        </Txt6>
      </PxCard>
    </ScrollView>
  );
}

export function PxCard(props: IPxCardProps) {
  const { theme } = useTheme();

  const { children, wrapperStyle, testId, wrapperA11yProps, ...viewProps } =
    props;

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: theme.card,
        },
        wrapperStyle,
      ]}
      {...e2eID(testId)}
      {...a11y({
        ...wrapperA11yProps,
      })}
      {...viewProps}
    >
      {children}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    padding: 20,
  },
});