/**

 * Copyright (c) 2024 Huawei Technologies Co., Ltd.

 *

 * This source code is licensed under the MIT license found in the

 * LICENSE-MIT file in the root directory of this source tree.

 */



import React from 'react';

import { StyleSheet, View, ViewProps } from 'react-native';



export function DeepTree({

  breadth,

  depth,

  id,

  wrap,

}: {

  breadth: number;

  depth: number;

  id: number;

  wrap: number;

}) {

  let result = (

    <Box color={id % 3} layout={depth % 2 === 0 ? 'row' : 'column'} outer>

      {depth === 0 && <Box color={(id % 3) + 3} fixed />}

      {depth !== 0 &&

        Array.from({ length: breadth }).map((el, i) => (

          <DeepTree

            breadth={breadth}

            depth={depth - 1}

            id={i}

            key={i}

            wrap={wrap}

          />

        ))}

    </Box>

  );

  for (let i = 0; i < wrap; i++) {

    result = <Box>{result}</Box>;

  }

  return result;

}



const Box = ({

  color = -1,

  fixed = false,

  layout = 'column',

  outer = false,

  ...other

}: ViewProps & {

  color?: number;

  fixed?: boolean;

  layout?: 'column' | 'row';

  outer?: boolean;

}) => (

  <View

    {...other}

    style={[

      color === -1 ? undefined : styles[`color${color}` as keyof typeof styles],

      fixed && styles.fixed,

      layout === 'row' && styles.row,

      outer && styles.outer,

    ]}

  />

);



const styles = StyleSheet.create({

  outer: {

    alignSelf: 'flex-start',

    padding: 2,

  },

  row: {

    flexDirection: 'row',

  },

  color0: {

    backgroundColor: '#14171A',

  },

  color1: {

    backgroundColor: '#AAB8C2',

  },

  color2: {

    backgroundColor: '#E6ECF0',

  },

  color3: {

    backgroundColor: '#FFAD1F',

  },

  color4: {

    backgroundColor: '#F45D22',

  },

  color5: {

    backgroundColor: '#E0245E',

  },

  fixed: {

    width: 4,

    height: 4,

  },

});



export default Box;