import type { WidgetTranslations } from '../i18n';
import './PhotoGuide.css';

function Figure({ baggy = false, side }: { baggy?: boolean; side?: 'left' | 'right' }) {
  return <svg className={`aisthetix-guide-figure ${side ? `aisthetix-guide-${side}` : ''}`} viewBox="0 0 100 240" aria-hidden="true" focusable="false">
    {baggy ? <g>
    <path d="M30 213L33 140H67L70 213H53.5L50 168 46.5 213Z" fill="#b8a487"/>
    <path d="M37 211H48.5V219Q48.5 222 45.5 222H35Q33 222 33 220 33 218 36 217.5ZM63 211H51.5V219Q51.5 222 54.5 222H65Q67 222 67 220 67 218 64 217.5Z" fill="#fff" stroke="#cfcfcf" strokeWidth=".8"/>
    <circle cx="19" cy="140" r="4" fill="#e7bfa2"/><circle cx="81" cy="140" r="4" fill="#e7bfa2"/>
    <path d="M34 44Q50 38 66 44L80 56 85 136 73 138 73 152H27V138L15 136 20 56Z" fill="#8c9b8d"/>
    <path d="M35 46Q34 22 50 18 66 22 65 46 58 52 50 52 42 52 35 46Z" fill="#7d8b7e"/>
    <ellipse cx="50" cy="29" rx="10.5" ry="12.5" fill="#efc6a9"/>
    <path d="M39.5 30C38 15 62 15 60.5 30 57 22 46 20 39.5 30Z" fill="#c9a46a"/>
  </g> : <g>
    <path d="M36.5 27C36 9 64 9 63.5 27L65 56C58 60 42 60 35 56Z" fill="#c9a46a"/>
    <path d="M37 104H63L62 213H53.5L50.5 130 47.5 213H38Z" fill="#2b2b30"/>
    <path d="M38 211H48.5V219Q48.5 222 45.5 222H35Q33 222 33 220 33 218 36 217.5Z" fill="#fff" stroke="#cfcfcf" strokeWidth=".8"/>
    <path d="M62 211H51.5V219Q51.5 222 54.5 222H65Q67 222 67 220 67 218 64 217.5Z" fill="#fff" stroke="#cfcfcf" strokeWidth=".8"/>
    <path d="M31 54C27 72 27.5 96 29.5 122M69 54C73 72 72.5 96 70.5 122" stroke="#e7bfa2" strokeWidth="6.5" strokeLinecap="round" fill="none"/>
    <rect x="46" y="37" width="8" height="11" rx="3" fill="#e7bfa2"/>
    <path d="M39 45Q50 50 61 45L71.5 52.5 70 69 64.5 67.5 63.5 107H36.5L35.5 67.5 30 69 28.5 52.5Z" fill="#fff" stroke="#d6d6d6" strokeWidth=".8"/>
    <path d="M38 27C36.5 40 37 52 38.5 63 40.5 64 42.5 63 43.5 61.5 42.5 50 42 40 43 31ZM62 27C63.5 40 63 52 61.5 63 59.5 64 57.5 63 56.5 61.5 57.5 50 58 40 57 31Z" fill="#c9a46a"/>
    <ellipse cx="50" cy="27" rx="11" ry="13" fill="#efc6a9"/>
    <path d="M38.5 29C37 13 63 13 61.5 29 58 20 46 18 38.5 29Z" fill="#c9a46a"/>
  </g>}
  </svg>;
}

function Scene({ kind = 'good' }: { kind?: string }) {
  return <div className={`aisthetix-guide-scene aisthetix-guide-${kind}`} aria-hidden="true">
    {kind === 'group' && <><Figure side="left" /><Figure side="right" /></>}
    <Figure baggy={kind === 'baggy'} />
    {kind === 'dark' && <span className="aisthetix-guide-shade" />}
    <span className="aisthetix-guide-badge">{kind === 'good' ? '✓' : '×'}</span>
  </div>;
}

export function PhotoGuide({ t }: { t: WidgetTranslations['upload']['guide'] }) {
  return <div className="aisthetix-photo-guide">
    <div className="aisthetix-guide-do">
      <Scene />
      <div><p className="aisthetix-guide-heading">{t.do}</p>
        <ul>{t.checks.map(check => <li key={check.title}>
          <span className="aisthetix-guide-check" aria-hidden="true">✓</span>
          <div><b>{check.title}</b><span>{check.detail}</span></div>
        </li>)}</ul>
      </div>
    </div>
    <p className="aisthetix-guide-heading aisthetix-guide-dont">{t.dont}</p>
    <div className="aisthetix-guide-grid">{['baggy', 'crop', 'far', 'group', 'dark'].map((kind, index) =>
      <div key={kind}><Scene kind={kind} /><p>{t.avoid[index]}</p></div>
    )}</div>
    <p className="aisthetix-guide-tip">{t.tip}</p>
  </div>;
}