import {ink, paper} from '../../src/visuals';

export const routePoints = {
  start: {x: 275, y: 470},
  lake: {x: 514, y: 432},
  lookout: {x: 790, y: 355},
};

const ridgePath = 'M125 300 L207 176 L248 230 L303 135 L380 300';
const badgeOutline = 'M250 35 C356 35 422 110 422 220 V353 L250 465 L78 353 V220 C78 110 144 35 250 35Z';

export const RouteBadge = ({variant = 0}: {variant?: number}) => (
  <svg viewBox="0 0 500 500" width="100%" height="100%" role="img" aria-label={`Original ridge route badge, treatment ${variant + 1}`}>
    <path d={badgeOutline} fill={paper} stroke={ink} strokeWidth="8"/>
    {variant === 1 && <g fill="none" stroke="#a3b8a8" strokeWidth="3">
      {[0, 1, 2, 3, 4].map(index => <path key={index} d={`M110 ${270 + index * 19} C165 ${215 + index * 19} 198 ${307 + index * 12} 260 ${250 + index * 18} S353 ${224 + index * 20} 390 ${272 + index * 19}`}/>)}
    </g>}
    {variant === 2 && <g stroke="#608f9a" strokeWidth="5" fill="none">
      <path d="M140 330 C195 276 217 373 270 321 S342 307 370 327"/>
      <path d="M137 350 C192 296 217 393 270 341 S342 327 363 347"/>
      <circle cx="353" cy="183" r="22" fill="#c9dadd" stroke="none"/>
    </g>}
    {variant === 3 && <g fill="#a4bc9d">
      {[135, 190, 310, 365].map((position, index) => <path key={position} d={`M${position} ${295 + index % 2 * 18} l-22 38 h14 l-24 30 h64 l-24-30 h14Z`}/>)}
    </g>}
    <path d={ridgePath} fill="none" stroke={ink} strokeWidth="12" strokeLinejoin="round" strokeLinecap="round"/>
    <path d="M185 357 C233 344 238 320 255 300 S285 258 303 242" fill="none" stroke="#b26440" strokeWidth="8" strokeLinecap="round" strokeDasharray="2 14"/>
    <circle cx="303" cy="242" r="10" fill="#b26440" stroke={paper} strokeWidth="4"/>
    <path d="M216 392H284" stroke={ink} strokeWidth="4"/>
    <text x="250" y="421" fill={ink} textAnchor="middle" fontFamily="Study Sans" fontSize="20" letterSpacing="5">RIDGE</text>
  </svg>
);

export const TrailMap = () => (
  <svg viewBox="0 0 1280 720" width="1280" height="720" role="img" aria-label="Original fictional ridge loop map with lake, trailhead and lookout">
    <rect x="80" y="142" width="1120" height="504" rx="22" fill="#e7ecdf" stroke="#bac8b7"/>
    <g fill="none" stroke="#c5d0bc" strokeWidth="2">
      {[0, 1, 2, 3, 4, 5, 6].map(index => <path key={index} d={`M${130 + index * 21} 585 C${270 + index * 22} 365 ${320 + index * 13} 560 ${465 + index * 27} 332 S${750 + index * 26} 165 ${1050 + index * 12} ${215 + index * 35}`}/>)}
      {[0, 1, 2, 3].map(index => <path key={index} d={`M${610 + index * 32} 604 C${710 + index * 21} 478 ${803 + index * 31} 600 ${1095 + index * 11} ${376 + index * 36}`}/>)}
    </g>
    <path d="M415 343 C445 309 512 333 532 367 C553 401 515 433 469 426 C417 419 389 378 415 343Z" fill="#bad2d1" stroke="#8cbbb9" strokeWidth="3"/>
    <g fill="#98ae8c">
      {[{x: 255, y: 281}, {x: 305, y: 264}, {x: 326, y: 310}, {x: 917, y: 448}, {x: 961, y: 422}].map(point => <path key={point.x} d={`M${point.x} ${point.y} l-14 26 h8 l-16 21 h44 l-16-21 h8Z`}/>)}
    </g>
    <path d="M275 470 C348 495 412 481 514 432 S670 316 790 355 S884 443 826 515 C716 597 394 587 275 470Z" fill="none" stroke={paper} strokeWidth="13" strokeLinecap="round"/>
    <path d="M275 470 C348 495 412 481 514 432 S670 316 790 355 S884 443 826 515 C716 597 394 587 275 470Z" fill="none" stroke="#b26440" strokeWidth="6" strokeLinecap="round"/>
    {Object.entries(routePoints).map(([name, point]) => <circle key={name} cx={point.x} cy={point.y} r="9" fill={ink} stroke={paper} strokeWidth="4"/>)}
    <circle cx={routePoints.lookout.x} cy={routePoints.lookout.y} r="22" fill="none" stroke="#315f55" strokeWidth="3"/>
    <g fontFamily="Study Sans" fill={ink} fontSize="20">
      <text x="190" y="447">Trailhead</text>
      <text x="412" y="308">Stillwater</text>
      <text x="715" y="311" fontWeight="700">Ridge lookout</text>
      <text x="968" y="580" fontSize="15">DRAWN, NOT SURVEYED</text>
    </g>
    <path d="M1107 256V193 M1095 208L1107 189L1119 208" stroke={ink} fill="none" strokeWidth="2"/>
    <text x="1107" y="176" textAnchor="middle" fontFamily="Study Sans" fill={ink} fontSize="16">N</text>
  </svg>
);
