From cee20b4ea411509ddf705023dccfbc2a24945bde Mon Sep 17 00:00:00 2001
From: Marius Butz <mbpictures13@gmail.com>
Date: Wed, 30 Sep 2020 00:43:15 +0200
Subject: [PATCH] add basic ProductConfigurator component with typings and
 productpreview

---
 src/components/preview.tsx     | 30 ++++++++++++++++++
 src/index.tsx                  | 57 ++++++++++++++++++++++++++++++----
 src/styles/ProductPreview.scss | 16 ++++++++++
 3 files changed, 97 insertions(+), 6 deletions(-)
 create mode 100644 src/components/preview.tsx
 create mode 100644 src/styles/ProductPreview.scss

diff --git a/src/components/preview.tsx b/src/components/preview.tsx
new file mode 100644
index 0000000..93e3305
--- /dev/null
+++ b/src/components/preview.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+import { Item } from "..";
+import style from "../styles/ProductPreview.scss";
+
+interface props {
+    currentSelection: { [keys: string]: Item };
+}
+
+export class ProductPreview extends React.Component<props, any> {
+    render() {
+        const selection: { [keys: string]: Item } = this.props.currentSelection;
+        const images = Object.keys(selection)
+            .sort(
+                (a: string, b: string) =>
+                    (selection[a].layer ?? 0) - (selection[b].layer ?? 0)
+            )
+            .map((key: string) => {
+                return (
+                    <img
+                        className={style.images}
+                        key={`preview-image-${key}`}
+                        src={selection[key].image}
+                        alt={selection[key].name}
+                    />
+                );
+            });
+
+        return <div className={style.preview}>{images}</div>;
+    }
+}
diff --git a/src/index.tsx b/src/index.tsx
index c06ff11..c247b5d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,55 @@
-import * as React from 'react'
-import styles from './styles.module.css'
+import * as React from "react";
+import { ProductPreview } from "./components/preview";
 
-interface Props {
-  text: string
+export type ItemConfiguration = { [keys: string]: string | number };
+
+export interface Item {
+    name: string;
+    price: number;
+    image: string;
+    thumbnail?: string;
+    color?: string;
+    default?: boolean;
+    layer?: number;
+}
+
+export interface Category {
+    name: string;
+    thumbnail: string;
+    layer?: number;
+    items: Item[];
+}
+
+interface props {
+    name: string;
+    onBack?: () => any;
+    onBuy?: (items: ItemConfiguration[]) => any;
+    categories: Category[];
+}
+
+interface state {
+    currentSelection: { [keys: string]: Item };
 }
 
-export const ExampleComponent = ({ text }: Props) => {
-  return <div className={styles.test}>Example Component: {text}</div>
+export class ProductConfigurator extends React.Component<props, state> {
+    constructor(props: props) {
+        super(props);
+        const currentSelection = {};
+        this.props.categories.forEach((val) => {
+            val.items.forEach((item) => {
+                if (!item.default) return;
+                if (!item.layer && val.layer) item.layer = val.layer;
+                currentSelection[val.name] = item;
+            });
+        });
+        this.state = {
+            currentSelection: currentSelection,
+        };
+    }
+
+    render() {
+        return (
+            <ProductPreview currentSelection={this.state.currentSelection} />
+        );
+    }
 }
diff --git a/src/styles/ProductPreview.scss b/src/styles/ProductPreview.scss
new file mode 100644
index 0000000..75ba748
--- /dev/null
+++ b/src/styles/ProductPreview.scss
@@ -0,0 +1,16 @@
+.preview {
+    height: 100%;
+    flex: 2;
+    position: relative;
+
+    .images {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: grid;
+        max-width: 100%;
+        max-height: 100%;
+        transition: .4s ease;
+    }
+}