/* global React */
// One illustrated assembly: the front, return wall, bevel and foot share a
// fixed upper-left light. Keep controls as HTML above this decorative shell.
function SlotShell(props) {
  const theme = props.theme;
  const id = 'shell-' + theme.id;
  const profiles = {
    classic: 'M60 0H560Q620 0 620 64V965Q620 984 600 984H20Q0 984 0 965V64Q0 0 60 0Z',
    lucky: 'M90 0H530Q620 0 620 100V954Q620 984 590 984H30Q0 984 0 954V100Q0 0 90 0Z',
    mythic: 'M44 0H576L620 44V962L598 984H22L0 962V44Z',
    neon: 'M25 0H595L620 25V970L606 984H14L0 970V25Z',
    ocean: 'M94 0H526Q620 0 620 92V948Q620 984 580 984H40Q0 984 0 948V92Q0 0 94 0Z'
  };
  const front = profiles[theme.id];
  const materials = {
    classic:['#f0d9a3','#b28f52','#45321e','#343e46','#101922'],
    lucky:['#e8d393','#a48749','#354c31','#243e32','#091b17'],
    mythic:['#c6afd9','#7a638e','#2c203b','#332c42','#110e1c'],
    neon:['#c1e8f0','#657a93','#283344','#242a3b','#0a0c1b'],
    ocean:['#d2e9df','#6b9d9d','#204958','#20424c','#071923']
  };
  const material = materials[theme.id];
  const colors = {'--metal-hi':material[0],'--metal-mid':material[1],'--metal-dark':material[2],'--panel-hi':material[3],'--panel-dark':material[4]};
  return <svg className="cabinet-shell-art" style={colors} viewBox="0 0 674 1010" preserveAspectRatio="none" aria-hidden="true" focusable="false">
    <defs>
      <linearGradient id={id+'-wall'} x1="0" y1="0" x2="1" y2="0">
        <stop offset="0" stopColor="var(--metal-dark)"/><stop offset=".35" stopColor="var(--panel-hi)"/><stop offset="1" stopColor="#03070b"/>
      </linearGradient>
      <linearGradient id={id+'-rim'} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor="#fff5d5"/><stop offset=".18" stopColor="var(--metal-hi)"/><stop offset=".35" stopColor="var(--metal-mid)"/><stop offset=".53" stopColor="var(--metal-dark)"/><stop offset=".77" stopColor="var(--metal-mid)"/><stop offset="1" stopColor="#111b22"/>
      </linearGradient>
      <linearGradient id={id+'-enamel'} x1="0" y1="0" x2="1" y2=".7">
        <stop offset="0" stopColor="var(--panel-hi)"/><stop offset=".33" stopColor="var(--panel-dark)"/><stop offset=".8" stopColor="var(--panel-dark)"/><stop offset="1" stopColor="#040a10"/>
      </linearGradient>
      <linearGradient id={id+'-foot'} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="var(--metal-hi)"/><stop offset=".13" stopColor="var(--metal-mid)"/><stop offset=".25" stopColor="#1a242c"/><stop offset="1" stopColor="#030609"/>
      </linearGradient>
      <pattern id={id+'-grain'} width="6" height="6" patternUnits="userSpaceOnUse"><path d="M0 1H6" stroke="#ffffff" strokeOpacity=".035" strokeWidth=".5"/></pattern>
      <clipPath id={id+'-clip'}><path d={front}/></clipPath>
    </defs>
    <path d={front} transform="translate(40 18)" fill={'url(#'+id+'-wall)'} stroke="#05090d" strokeWidth="4"/>
    <path d="M603 36L658 70V970L611 994V76Z" fill={'url(#'+id+'-wall)'}/>
    <path d="M647 105V946" fill="none" stroke="var(--metal-mid)" strokeOpacity=".35" strokeWidth="2"/>
    <path d={front} fill={'url(#'+id+'-rim)'}/>
    <path d={front} transform="translate(9 10) scale(.971 .978)" fill="#050a0e" stroke="var(--metal-hi)" strokeWidth="1.5"/>
    <path d={front} transform="translate(17 18) scale(.945 .96)" fill={'url(#'+id+'-enamel)'} stroke="var(--metal-dark)" strokeWidth="3"/>
    <g clipPath={'url(#'+id+'-clip)'}>
      <rect x="20" y="20" width="580" height="940" fill={'url(#'+id+'-grain)'}/>
      <path d="M27 140V937Q27 951 44 951H572" fill="none" stroke="var(--metal-hi)" strokeOpacity=".42" strokeWidth="2"/>
      <path d="M592 140V940" fill="none" stroke="#000" strokeOpacity=".7" strokeWidth="5"/>
    </g>
    <path d="M19 978H618L654 994L638 1008H42L19 995Z" fill={'url(#'+id+'-foot)'}/>
    <path d="M35 985H610L637 996" fill="none" stroke="var(--metal-mid)" strokeOpacity=".6"/>
    {[155,885].map(function(y){return <g key={y} transform={'translate(635 '+y+')'}><ellipse rx="4" ry="6" fill="#111920" stroke="#687577" strokeWidth="1"/><path d="M-2 -2L2 2" stroke="#020406"/></g>;})}
  </svg>;
}

// Shared visible hardware keeps the showroom and playing cabinet consistent.
function SlotHandleParts(props) {
  return <React.Fragment>
    <span className="slot-lever-track" />
    <span className="slot-lever-arm" ref={props.armRef}><span className="slot-lever-ball" /></span>
    <span className="slot-lever-pivot" />
  </React.Fragment>;
}