import React from 'react'
import { Select } from 'antd'
import arcmIcons from '../../Icons'
import { useArchivedOrder } from '../../context/ArchivedOrderContext'

const { Option } = Select

const BulkActionSection = () => {
  const {
    bulkAction,
    setBulkAction,
    handleBulkAction,
    duplicateCheckLoading,
    t
  } = useArchivedOrder()
  return (
    <div className='archived-order-bulk-section'>
      <div className='arcm-inline-flex arcm-flex-wrap arcm-gap-2'>
        <Select
          defaultValue={bulkAction}
          onChange={value => setBulkAction(value)}
          className={`arcm-select arcm-flex-grow arcm-text-sm arcm-font-normal arcm-w-[200px] ${
            bulkAction ? 'arcm-text-black' : 'arcm-text-gray-400'
          }`}
          options={[
            { value: '', label: t('select_action') },
            { value: 'unarchive', label: t('unarchive_orders') },
            {
              value: 'permanently_delete',
              label: t('permanently_delete')
            }
          ]}
        >
          <Option value=''>{t('select_action')}</Option>
          <Option value='unarchive'>{t('unarchive_orders')}</Option>
          <Option value='permanently_delete'>
            {t('permanently_delete')}
          </Option>
        </Select>

        <button
          onClick={handleBulkAction}
          disabled={duplicateCheckLoading}
          className='arcm-text-white arcm-text-xs arcm-font-medium arcm-px-4 arcm-py-[11px] arcm-bg-[#3858e9] arcm-rounded-lg arcm-justify-center arcm-items-center arcm-gap-2 arcm-inline-flex arcm-transition-all hover:arcm-bg-blue-700 disabled:arcm-opacity-50 disabled:arcm-cursor-not-allowed'
        >
          {duplicateCheckLoading ? arcmIcons.spinning : t('apply')}
        </button>
      </div>
    </div>
  )
}

export default BulkActionSection