// Dependencies
import { collection } from '@freesewing/collection'
import { capitalize } from '@freesewing/utils'

// Hooks
import React, { useState } from 'react'

// Components
import { Link as WebLink, AnchorLink } from '@freesewing/react/components/Link'
import { ShowcaseIcon } from '@freesewing/react/components/Icon'

const linkBuilders = {
  new: (design) => `/-/?d=${design.toLowerCase()}`,
  docs: (design) => `/docs/designs/${design.toLowerCase()}`,
}

export const DesignTechnique = ({ technique }) => (
  <Link
    className="badge badge-accent hover:badge-secondary hover:shadow font-medium"
    href={`/designs/techniques/${technique}`}
  >
    {technique}
  </Link>
)

export const DesignTag = ({ tag }) => {
  const { t } = useTranslation(['tags'])

  return (
    <Link
      className="badge badge-primary hover:badge-secondary hover:shadow font-medium"
      href={`/designs/tags/${tag}`}
    >
      {t(tag)}
    </Link>
  )
}

export const DesignLink = ({ name, linkTo = 'new', className = linkClasses }) => (
  <Link href={linkBuilders[linkTo](name)} className={className}>
    {name}
  </Link>
)

export const DesignCard = ({ name, lineDrawing = false }) => {
  const { t } = useTranslation(ns)
  // Context
  const { setModal } = useContext(ModalContext)

  const LineDrawing =
    lineDrawing && lineDrawings[name]
      ? lineDrawings[name]
      : ({ className }) => <div className={className}></div>
  const exampleImageUrl = designImages[name]
    ? designImages[name]
    : 'https://images.pexels.com/photos/5626595/pexels-photo-5626595.jpeg?cs=srgb&dl=pexels-frida-toth-5626595.jpg&fm=jpg&w=640&h=427&_gl=1*vmxq7y*_ga*MTM0OTk5OTY4NS4xNjYxMjUyMjc0*_ga_8JE65Q40S6*MTY5NTU1NDc0Mi4yNS4xLjE2OTU1NTU1NjIuMC4wLjA.'

  const bg = lineDrawing
    ? {}
    : {
        backgroundImage: `url(${exampleImageUrl}`,
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
      }

  return (
    <button
      onClick={() =>
        setModal(
          <ModalWrapper
            flex="col"
            justify="top lg:justify-center"
            slideFrom="right"
            keepOpenOnClick
          >
            <h1>{t(`designs:${name}.t`)}</h1>
            <DesignInfo design={name} modal />
          </ModalWrapper>
        )
      }
    >
      <div
        className={`flex flex-col flex-nowrap items-start justify-start gap-2 h-80 w-full
        btn btn-ghost border border-neutral p-0 border-b-none
        hover:border hover:border-secondary
        relative`}
        style={bg}
      >
        <h5
          className={`text-center py-2 px-4 rounded-t-lg m-0 w-full
        ${lineDrawing ? '' : 'bg-neutral/70 text-neutral-content'}`}
        >
          {t(`designs:${name}.t`)}
        </h5>
        <div className={lineDrawing ? 'p-4 grow w-full' : 'py-8'}>
          <LineDrawing className="h-64 max-w-full m-auto my-4 text-base-content" />
        </div>
        <div
          className={`pt-0 m-0 -mt-2 text-center w-full
        ${lineDrawing ? 'bg-transparent text-base-content' : 'bg-neutral/70 text-neutral-content'}`}
        ></div>
      </div>
    </button>
  )
}