// Cubo: um cubo 3D de verdade (preserve-3d, seis faces). Cada face tem um tom da cor-base (topo claro, esquerda média,
// direita escura), borda de encaixe e, no topo, um pino redondo. Texto ou imagem opcionais nas faces.
import React from 'react';
import {COR, FONTE_A, tom} from '../base';

export type FaceConteudo = {texto?: string; imagem?: string; corTexto?: string};
export type CuboProps = {
  /** lado em px */
  lado: number;
  cor: string;
  /** conteúdo por face: frente, direita, esquerda, topo */
  faces?: {frente?: FaceConteudo; direita?: FaceConteudo; esquerda?: FaceConteudo; topo?: FaceConteudo; fundo?: FaceConteudo; base?: FaceConteudo};
  /** mostra o pino redondo no topo */
  pino?: boolean;
  style?: React.CSSProperties;
};

const TONS = {frente: 1.0, direita: 0.78, esquerda: 0.9, topo: 1.12, fundo: 0.66, base: 0.55};
const POSICAO = (s: number) => ({
  frente: `translateZ(${s / 2}px)`,
  fundo: `rotateY(180deg) translateZ(${s / 2}px)`,
  direita: `rotateY(90deg) translateZ(${s / 2}px)`,
  esquerda: `rotateY(-90deg) translateZ(${s / 2}px)`,
  topo: `rotateX(90deg) translateZ(${s / 2}px)`,
  base: `rotateX(-90deg) translateZ(${s / 2}px)`,
});

export const Cubo: React.FC<CuboProps> = ({lado, cor, faces = {}, pino = true, style}) => {
  const pos = POSICAO(lado);
  return <div style={{position: 'absolute', left: -lado / 2, top: -lado / 2, width: lado, height: lado, transformStyle: 'preserve-3d', ...style}}>
    {(Object.keys(TONS) as (keyof typeof TONS)[]).map((nome) => {
      const c = faces[nome];
      return <div key={nome} style={{position: 'absolute', inset: 0, background: tom(cor, TONS[nome]), borderRadius: lado * 0.05, border: '4px solid rgba(255,255,255,0.28)', boxSizing: 'border-box', transform: pos[nome], backfaceVisibility: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden'}}>
        {nome === 'topo' && pino && !c && <div style={{width: lado * 0.38, height: lado * 0.38, borderRadius: '50%', background: tom(cor, 1.2), border: `4px solid ${tom(cor, 0.9)}`, boxSizing: 'border-box'}} />}
        {c?.imagem && <img src={c.imagem} style={{width: '100%', height: '100%', objectFit: 'cover'}} />}
        {c?.texto && <div style={{fontFamily: FONTE_A, fontSize: lado * 0.2, lineHeight: 1, color: c.corTexto ?? COR.osso, textAlign: 'center', whiteSpace: 'nowrap'}}>{c.texto}</div>}
      </div>;
    })}
  </div>;
};