'use client';

import { Button, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
import clsx from 'clsx';
import { Order } from 'lib/shopify/types';
import Link from 'next/link';
import { useState } from 'react';
import ActivateWarrantyModal from './activate-warranty-modal';

const MobileOrderActions = ({ order }: { order: Order }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Menu as="div" className="relative flex justify-end lg:hidden">
        <div className="flex items-center">
          <MenuButton className="-m-2 flex items-center p-2 text-gray-400 hover:text-gray-500">
            <span className="sr-only">Options for order {order.name}</span>
            <EllipsisVerticalIcon className="h-6 w-6" aria-hidden="true" />
          </MenuButton>
        </div>

        <MenuItems
          transition
          className="absolute right-0 z-10 mt-2 w-40 origin-bottom-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition focus:outline-none data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in"
        >
          <div className="py-1">
            <MenuItem>
              {({ focus }) => (
                <Link
                  href={`/account/orders/${order.normalizedId}`}
                  className={clsx(
                    focus ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                    'block px-4 py-2 text-sm'
                  )}
                >
                  View
                </Link>
              )}
            </MenuItem>
            <MenuItem>
              {({ focus }) => (
                <Button
                  className={clsx(
                    focus ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
                    'flex w-full px-4 py-2 text-sm'
                  )}
                  onClick={() => setIsOpen(true)}
                >
                  Activate Warranty
                </Button>
              )}
            </MenuItem>
          </div>
        </MenuItems>
      </Menu>
      <ActivateWarrantyModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </>
  );
};

export default MobileOrderActions;