// Dependencies
import { measurements as measurementsTranslations } from '@freesewing/i18n'
import { requiredMeasurements as designMeasurements } from '@freesewing/collection'
import { cloudflareImageUrl, hasRequiredMeasurements } from '@freesewing/utils'
// Context
import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
import { ModalContext } from '@freesewing/react/context/Modal'
// Hooks
import React, { useState, useEffect, Fragment, useContext } from 'react'
import { useAccount } from '@freesewing/react/hooks/useAccount'
import { useBackend } from '@freesewing/react/hooks/useBackend'
// Components
import { Link as WebLink } from '@freesewing/react/components/Link'
import { NoIcon, OkIcon, PlusIcon, TrashIcon, UploadIcon } from '@freesewing/react/components/Icon'
import { ModalWrapper } from '@freesewing/react/components/Modal'
import { NewSet } from './Set.mjs'

/**
 * The component for the measurements sets in the user's account.
 *
 * @component
 * @param {object} props - All component props
 * @param {React.Component} props.Link - A framework specific Link component for client-side routing
 * @returns {JSX.Element}
 */
export const Sets = ({ Link = false }) => {
  if (!Link) Link = WebLink

  // Hooks
  const { control } = useAccount()
  const backend = useBackend()

  // State
  const [sets, setSets] = useState([])
  const [selected, setSelected] = useState({})
  const [refresh, setRefresh] = useState(0)

  // Context
  const { setLoadingStatus, LoadingProgress } = useContext(LoadingStatusContext)
  const { setModal } = useContext(ModalContext)

  // Effects
  useEffect(() => {
    const getSets = async () => {
      const [status, body] = await backend.getSets()
      if (status === 200 && body.result === 'success') setSets(body.sets)
    }
    getSets()
  }, [refresh])

  // Helper var to see how many are selected
  const selCount = Object.keys(selected).length

  // Helper method to toggle single selection
  const toggleSelect = (id) => {
    const newSelected = { ...selected }
    if (newSelected[id]) delete newSelected[id]
    else newSelected[id] = 1
    setSelected(newSelected)
  }

  // Helper method to toggle select all
  const toggleSelectAll = () => {
    if (selCount === sets.length) setSelected({})
    else {
      const newSelected = {}
      for (const set of sets) newSelected[set.id] = 1
      setSelected(newSelected)
    }
  }

  // Helper to delete one or more measurements sets
  const removeSelectedSets = async () => {
    let i = 0
    for (const id in selected) {
      i++
      await backend.removeSet(id)
      setLoadingStatus([
        true,
        <LoadingProgress val={i} max={selCount} msg="Removing measurements sets" key="linter" />,
      ])
    }
    setSelected({})
    setRefresh(refresh + 1)
    setLoadingStatus([true, 'Nailed it', true, true])
  }

  return (
    <div className="tw:max-w-7xl tw:xl:pl-4">
      <p className="tw:text-center tw:md:text-right">
        <Link
          className="tw:daisy-btn tw:daisy-btn-secondary tw:capitalize tw:w-full tw:md:w-auto tw:mr-2 tw:hover:no-underline tw:hover:text-primary-content no-hover-decoration"
          bottom
          primary
          href="/account/import"
        >
          <UploadIcon className="tw:w-6 tw:h-6 tw:text-secondary-content" />
          <span className="tw:text-secondary-content">Import Measurements Sets</span>
        </Link>
        <button
          className="tw:daisy-btn tw:daisy-btn-primary tw:capitalize tw:w-full tw:md:w-auto tw:hover:no-underline tw:hover:text-primary-content"
          onClick={() =>
            setModal(
              <ModalWrapper keepOpenOnClick>
                <NewSet />
              </ModalWrapper>
            )
          }
        >
          <PlusIcon />
          Create a new Measurements Set
        </button>
      </p>
      <div className="tw:flex tw:flex-row tw:gap-2 tw:border-b-2 tw:mb-4 tw:pb-4 tw:mt-8 tw:h-14 tw:items-center">
        <input
          type="checkbox"
          className="tw:daisy-checkbox tw:daisy-checkbox-secondary"
          onClick={toggleSelectAll}
          checked={sets.length === selCount}
        />
        <button
          className="tw:daisy-btn tw:daisy-btn-error"
          onClick={removeSelectedSets}
          disabled={selCount < 1}
        >
          <TrashIcon /> {selCount} Measurements Sets
        </button>
      </div>
      <div className="tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-2">
        {sets.map((set, i) => (
          <div
            key={i}
            className={`tw:flex tw:flex-row tw:items-start tw:gap-1 tw:border-2
          ${
            selected[set.id]
              ? 'tw:border-solid tw:border-secondary'
              : 'tw:border-dotted tw:border-base-300'
          } tw:rounded-lg p-2`}
          >
            <label className="tw:w-8 tw:h-full tw:shrink-0">
              <input
                type="checkbox"
                checked={selected[set.id] ? true : false}
                className="tw:daisy-checkbox tw:daisy-checkbox-secondary"
                onClick={() => toggleSelect(set.id)}
              />
            </label>
            <div className="tw:w-full">
              <MsetCard
                control={control}
                href={`/account/data/sets/set?id=${set.id}`}
                set={set}
                size="md"
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

/**
 * A component to render a card of a single measurements set.
 *
 * This is a pure render component, you need to pass in the data.
 *
 * @component
 * @param {object} props - All component props
 * @param {React.Component} [props.Link = false] - An optional framework-specific Link component
 * @param {string} [props.design = false] - An optional design name to check for required measurements in this set
 * @param {string} [props.href = false] - On optional href for the card to link to
 * @param {function} [props.onClick = false] - On optional onClick handler method
 * @param {object} props.set - The data of the measurements set
 * @param {string} [props.size = 'lg'] - Size of the card, one of lg, md, or sm
 * @param {bool} [props.useA = false] - Whether to use an A tag or a Link component for href
 * @returns {JSX.Element}
 */
export const MsetCard = ({
  Link = false,
  design = false,
  href = false,
  onClick = false,
  set,
  size = 'lg',
  useA = false,
}) => {
  if (!Link) Link = WebLink
  const sizes = {
    lg: 96,
    md: 48,
    sm: 36,
  }
  const s = sizes[size]

  const wrapperProps = {
    className: `tw:bg-base-300 tw:aspect-square tw:h-${s} tw:w-${s} tw:mb-2 tw:grow tw:w-full
      tw:hover:cursor-pointer tw:border-0 tw:opacity-80 tw:hover:opacity-100
      tw:mx-auto tw:flex tw:flex-col tw:items-start tw:text-center tw:justify-between tw:rounded-none tw:md:rounded shadow`,
    style: {
      backgroundImage: `url(${cloudflareImageUrl({ type: 'w500', id: set.img })})`,
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: '50%',
    },
  }
  if (!set.img || set.img === 'default-avatar')
    wrapperProps.style.backgroundPosition = 'bottom right'

  let icon = <span></span>
  let missingMeasies = ''
  let linebreak = ''
  const maxLength = 75
  if (design) {
    const [hasMeasies, missing] = hasRequiredMeasurements(
      designMeasurements[design],
      set.measies,
      true
    )
    const iconClasses = 'tw:w-8 tw:h-8 tw:p-1 tw:rounded-full tw:-mt-2 tw:-ml-2 tw:shadow'
    icon = hasMeasies ? (
      <OkIcon className={`${iconClasses} tw:bg-success tw:text-success-content`} stroke={4} />
    ) : (
      <NoIcon className={`${iconClasses} tw:bg-error tw:text-error-content`} stroke={3} />
    )
    if (missing.length > 0) {
      const translated = missing.map((m) => measurementsTranslations[m])
      let missingString = 'Missing:' + translated.join(', ')
      if (missingString.length > maxLength) {
        const lastSpace = missingString.lastIndexOf(', ', maxLength)
        missingString = missingString.substring(0, lastSpace) + ', and more...'
      }
      const measieClasses = 'tw:font-normal tw:text-xs'
      missingMeasies = <span className={`${measieClasses}`}>{missingString}</span>
      linebreak = <br />
    }
  }

  const inner = (
    <>
      {icon}
      <span className="tw:bg-neutral/50 tw:text-neutral-content tw:px-4 tw:w-full tw:py-2 tw:rounded tw:rounded-t-none tw:font-bold tw:leading-5">
        {set.name}
        {linebreak}
        {missingMeasies}
      </span>
    </>
  )

  // Is it a button with an onClick handler?
  if (onClick)
    return (
      <button {...wrapperProps} onClick={() => onClick(set)}>
        {inner}
      </button>
    )

  // Returns a link to an internal page
  if (href && !useA)
    return (
      <Link {...wrapperProps} href={href}>
        {inner}
      </Link>
    )

  // Returns a link to an external page
  if (href && useA)
    return (
      <a {...wrapperProps} href={href}>
        {inner}
      </a>
    )

  // Returns a div
  return <div {...wrapperProps}>{inner}</div>
}