import { useState } from 'react'
import cx from 'classnames'

import BlurImage from '@/components/shared/BlurImage'
import Icon from '@/components/shared/Icon'

export type repState = {
  name: string
  salesRepresentatives: {
    nodes: salesRep[]
  }
}

type salesRep = {
  title: string
  featuredImage?: {
    node: {
      imageUrl: string
      alt: string
      placeholder: string
    }
  } | null
  salesRepContent: {
    email: string
    jobTitle: string
    phoneNumber: string
  }
  productLines: any
}

type Props = {
  repStates: {
    nodes: repState[]
  }
}

function ProfileCard({
  title,
  featuredImage,
  salesRepContent: { jobTitle, phoneNumber, email },
  productLines,
}: salesRep) {
  return (
    <div className="flex sm:flex-row flex-col items-center m-2 p-2">
      <div className="relative overflow-hidden rounded-full sm:w-[170px] w-[150px] sm:mr-[40px] mr-0 sm:mb-0 mb-[20px]">
        {featuredImage && (
          <BlurImage
            src={featuredImage.node.imageUrl}
            placeholderSrc={featuredImage?.node.placeholder}
            width={170}
            height={170}
            alt={title}
          />
        )}
      </div>

      <div className="sm:text-left text-center">
        <div className="mb-3">
          {productLines.nodes.map((pline: any) => {
            return (
              <span key={pline.name} className="text-accent-red text-h7">
                {pline.name}
              </span>
            )
          })}
        </div>
        <div className="sm:mb-3">
          <strong className="text-subtitle">{title}</strong>
        </div>
        <div className="mb-[20px]">
          <span className="text-body text-gray-muted">{jobTitle}</span>
        </div>
        <div>
          <strong className="sm:text-h6 text-body font-bold text-accent-red">Direct:</strong>{' '}
          <span className="sm:text-h6 text-body font-light">{phoneNumber}</span>
        </div>
        <div>
          <a href={`mailto:${email}`} className="inline-block mb-1 sm:text-h6 text-body font-light border-b">
            {email}
          </a>
        </div>
      </div>
    </div>
  )
}

function SalesRepresentatives({ salesRepresentatives }: { salesRepresentatives: any }) {
  return (
    <div className="md:py-[70px] py-[30px] md:[&>div]:py-[70px] [&>div]:py-[60px] [&>div]:border-b [&>div:last-child]:border-0">
      {salesRepresentatives?.nodes.map(({ title, featuredImage, salesRepContent, productLines }: salesRep) => {
        return (
          <ProfileCard
            key={title}
            title={title}
            featuredImage={featuredImage}
            salesRepContent={salesRepContent}
            productLines={productLines}
          />
        )
      })}
    </div>
  )
}

export default function FindARep({ repStates }: Props) {
  const [stateSelect, setStateSelect] = useState({
    selectedState: 'Select',
    isActive: false,
    isValid: false,
  })
  const getStateData = (state: string): any => {
    return repStates?.nodes.find((item: any) => item.name === state) || {}
  }
  const { isActive, isValid, selectedState } = stateSelect
  const { salesRepresentatives } = getStateData(selectedState)

  return (
    <div className="mt-[60px]">
      <label htmlFor="states" className="block text-[20px] leading-[24px] mb-3">
        Select your state or region <span className="text-accent-red">*</span>
      </label>
      <div className={cx('w-full border border-black relative', { isActive: 'active' })}>
        <button
          className="flex justify-between items-center w-full min-h-[50px] px-[25px] text-[20px] leading-[30px] text-left"
          onClick={() => {
            setStateSelect(prevState => ({
              ...prevState,
              isActive: !stateSelect.isActive,
            }))
          }}
        >
          <span className={cx({ 'text-placeholder': !isValid })}>{selectedState}</span>
          <Icon
            name="arrow-down"
            className={cx('w-[21px] h-[21px] text-black transition ease-in-out duration-150', {
              'rotate-180': isActive,
            })}
          />
        </button>
        <ul className={cx('', { block: isActive, hidden: !isActive })}>
          {repStates?.nodes.map((item: any) => (
            <li key={item.name}>
              <button
                className="group block w-full px-[25px] py-[10px] text-[20px] leading-[30px] text-left"
                onClick={() => {
                  setStateSelect({ selectedState: item.name, isActive: false, isValid: true })
                }}
              >
                <span className="group-hover:border-b transition ease-in-out duration-150">{item.name}</span>
              </button>
            </li>
          ))}
        </ul>
      </div>
      <div>
        {!!selectedState && !!salesRepresentatives && (
          <div>
            <SalesRepresentatives salesRepresentatives={salesRepresentatives} />
          </div>
        )}
      </div>
    </div>
  )
}