import React, { useRef, useState } from "react";
import { AutoSizingSvg } from "../auto-sizing-svg";
import { getBoundingBoxCenter } from "../bounding-box";
import { ColorWidget } from "../color-widget";
import { DEFAULT_BG_COLOR } from "../colors";
import { ExportSvgButton } from "../export-svg";
import { HoverDebugHelper } from "../hover-debug-helper";
import { NumericSlider } from "../numeric-slider";
import { reversePoint } from "../point";
import {
createSvgSymbolContext,
SvgSymbolContent,
SvgSymbolContext,
SvgSymbolData,
} from "../svg-symbol";
import { VocabularyWidget } from "../vocabulary-widget";
import {
svgRotate,
svgScale,
SvgTransforms,
svgTranslate,
} from "../svg-transform";
import { SvgVocabulary } from "../svg-vocabulary";
import { SymbolContextWidget } from "../symbol-context-widget";
import { range } from "../util";
const EYE = SvgVocabulary.get("eye");
const MandalaCircle: React.FC<
{
data: SvgSymbolData;
radius: number;
numSymbols: number;
} & SvgSymbolContext
> = (props) => {
const center = getBoundingBoxCenter(props.data.bbox);
const degreesPerItem = 360 / props.numSymbols;
const symbol = (
);
const symbols = range(props.numSymbols).map((i) => (
));
return <>{symbols}>;
};
export const MandalaPage: React.FC<{}> = () => {
const svgRef = useRef(null);
const [bgColor, setBgColor] = useState(DEFAULT_BG_COLOR);
const [symbol, setSymbol] = useState(EYE);
const [symbolCtx, setSymbolCtx] = useState(createSvgSymbolContext());
const [radius, setRadius] = useState(400);
const [numSymbols, setNumSymbols] = useState(6);
return (
<>
Mandala!
{" "}
>
);
};