'use client'

import { usePopupController } from '@/store/popupController'
import { useSuitable } from '@/hooks/useSuitable'
import { useSuitableStore } from '@/store/useSuitableStore'

export default function SuitableButton() {
  const popupController = usePopupController()
  const { getSuitableIds, clearSuitableStore, downloadSuitablePdf } = useSuitable()
  const { selectedItems, addAllSelectedItem } = useSuitableStore()

  const handleSelectAll = async () => {
    addAllSelectedItem(await getSuitableIds())
  }

  const handleOpenPopup = () => {
    if (selectedItems.size === 0) {
      alert('屋根材を選択してください。')
      return
    }
    popupController.setSuitableDetailPopup(true)
  }

  const handleRedirectPdfDownload = () => {
    if (selectedItems.size === 0) {
      alert('屋根材を選択してください。')
      return
    }
    downloadSuitablePdf()
  }

  return (
    <div className="float-btn-wrap">
      <div className="btn-flex-wrap com">
        <div className="btn-bx">
          {selectedItems.size === 0 ? (
            <button className="btn-frame n-blue icon" onClick={handleSelectAll}>
              全選択<i className="btn-arr"></i>
            </button>
          ) : (
            <button className="btn-frame n-blue icon" onClick={() => clearSuitableStore({ items: true })}>
              全て解除<i className="btn-arr"></i>
            </button>
          )}
        </div>
        <div className="btn-bx">
          <button className="btn-frame red icon" onClick={handleOpenPopup}>
            詳細を見る<i className="btn-arr"></i>
          </button>
        </div>
        <div className="btn-bx">
          <button className="btn-frame n-blue icon" onClick={handleRedirectPdfDownload}>
            選択ダウンロード<i className="btn-arr"></i>
          </button>
        </div>
      </div>
    </div>
  )
}