import React, { useEffect } from 'react'
import { Switch, Input, Tooltip } from 'antd'
import { useTranslations } from '../hooks/useTranslation'

const ArchivedOrdersSettings = ({
  AdminSettings,
  setAdminSettings
}) => {
  const { t } = useTranslations()
  
  // Get archived orders settings from AdminSettings or use defaults
  const archivedOrdersSettings = AdminSettings.accoutn_page_archived_oder || {
    enable_feature: false,
    custom_menu_label: t('archived_orders_placeholder'),
    enable_search: true,
    enable_filter: false
  }

  // Log error to console if settings are not present
  useEffect(() => {
    if (!AdminSettings.accoutn_page_archived_oder) {
      console.error('Archive Master: Default settings for "Archived Orders in My Account" feature are not present in SettingOption.php. Please add the "accoutn_page_archived_oder" key to the defaults.');
    }
  }, [AdminSettings.accoutn_page_archived_oder])

  const handleToggleChange = (key, checked) => {
    setAdminSettings(prev => ({
      ...prev,
      accoutn_page_archived_oder: {
        ...prev.accoutn_page_archived_oder,
        [key]: checked
      }
    }))
  }

  const handleInputChange = (key, value) => {
    setAdminSettings(prev => ({
      ...prev,
      accoutn_page_archived_oder: {
        ...prev.accoutn_page_archived_oder,
        [key]: value
      }
    }))
  }

  return (
    <>
      {/* Enable Archived Orders Toggle */}
      <label
        htmlFor='enable-archived-orders'
        className='btn-switch arcm-inline-flex arcm-items-center arcm-cursor-pointer arcm-mb-2'
      >
        <div className='arcm-flex arcm-items-center arcm-relative arcm-mr-2.5'>
          <input
            type='checkbox'
            checked={archivedOrdersSettings.enable_feature}
            id='enable-archived-orders'
            onChange={e => handleToggleChange('enable_feature', e.target.checked)}
            className='arcm-sr-only arcm-peer'
          />
          <div className='dot-round arcm-bg-slate-200 arcm-w-12 arcm-h-7 arcm-rounded-[500px] arcm-transition-all peer-[:checked]:arcm-bg-[#3858E9]'></div>
          <div className='dot arcm-absolute arcm-start-1 arcm-top-1 arcm-bg-transparent arcm-w-5 arcm-h-5 arcm-border-4 arcm-border-white arcm-rounded-[500px] arcm-transition-transform peer-checked:arcm-bg-white peer-checked:arcm-translate-x-full rtl:peer-checked:-arcm-translate-x-full'></div>
        </div>
        <div className='arcm-text-black arcm-text-sm arcm-font-medium'>
          <span className='arcm-mr-1'>
            {t('show_archived_orders_account')}
          </span>
            <Tooltip
              className='arcm-text-sm'
              placement='top'
              title={t('show_archived_orders_tooltip')}
              color='#fff'
            >
            <span className='arcm-ml-2 icon arcm-inline-flex'>
              <svg
                xmlns='http://www.w3.org/2000/svg'
                width='14'
                height='13'
                viewBox='0 0 14 13'
                fill='none'
              >
                <path
                  fill-rule='evenodd'
                  clip-rule='evenodd'
                  d='M13.4001 6.49998C13.4001 10.0346 10.5347 12.9 7.0001 12.9C3.46548 12.9 0.600098 10.0346 0.600098 6.49998C0.600098 2.96535 3.46548 0.0999756 7.0001 0.0999756C10.5347 0.0999756 13.4001 2.96535 13.4001 6.49998ZM6.15157 4.05143C5.91725 4.28574 5.53736 4.28574 5.30304 4.05143C5.06873 3.81711 5.06873 3.43721 5.30304 3.2029C6.2403 2.26564 7.75989 2.26564 8.69715 3.2029C9.63441 4.14016 9.63441 5.65975 8.69715 6.59701C8.38317 6.911 8.00238 7.12048 7.6001 7.22404V7.49995C7.6001 7.83132 7.33147 8.09995 7.0001 8.09995C6.66873 8.09995 6.4001 7.83132 6.4001 7.49995V7.09995C6.4001 6.52372 6.85605 6.16258 7.26517 6.07055C7.47868 6.02252 7.68138 5.91573 7.84863 5.74848C8.31725 5.27985 8.31725 4.52006 7.84863 4.05143C7.38 3.5828 6.6202 3.5828 6.15157 4.05143ZM7.0001 10.5C7.44192 10.5 7.8001 10.1418 7.8001 9.69998C7.8001 9.25815 7.44192 8.89997 7.0001 8.89997C6.55827 8.89997 6.2001 9.25815 6.2001 9.69998C6.2001 10.1418 6.55827 10.5 7.0001 10.5Z'
                  fill='#D1D5DB'
                />
              </svg>
            </span>
          </Tooltip>
        </div>
      </label>

      {/* Custom Menu Label - Only visible when feature is enabled */}
      {archivedOrdersSettings.enable_feature && (
        <div className='arcm-mb-4 arcm-mt-6'>
          <div className='arcm-flex arcm-items-center arcm-gap-2 arcm-mb-2'>
            <label className='arcm-block arcm-text-gray-700 arcm-text-sm arcm-font-medium'>
              {t('label_for_archived_orders')}
            </label>
            <Tooltip
              className='arcm-text-sm'
              placement='top'
              title={t('label_for_archived_orders_tooltip')}
              color='#fff'
            >
              <span className='arcm-ml-2 icon arcm-inline-flex'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  width='14'
                  height='13'
                  viewBox='0 0 14 13'
                  fill='none'
                >
                  <path
                    fill-rule='evenodd'
                    clip-rule='evenodd'
                    d='M13.4001 6.49998C13.4001 10.0346 10.5347 12.9 7.0001 12.9C3.46548 12.9 0.600098 10.0346 0.600098 6.49998C0.600098 2.96535 3.46548 0.0999756 7.0001 0.0999756C10.5347 0.0999756 13.4001 2.96535 13.4001 6.49998ZM6.15157 4.05143C5.91725 4.28574 5.53736 4.28574 5.30304 4.05143C5.06873 3.81711 5.06873 3.43721 5.30304 3.2029C6.2403 2.26564 7.75989 2.26564 8.69715 3.2029C9.63441 4.14016 9.63441 5.65975 8.69715 6.59701C8.38317 6.911 8.00238 7.12048 7.6001 7.22404V7.49995C7.6001 7.83132 7.33147 8.09995 7.0001 8.09995C6.66873 8.09995 6.4001 7.83132 6.4001 7.49995V7.09995C6.4001 6.52372 6.85605 6.16258 7.26517 6.07055C7.47868 6.02252 7.68138 5.91573 7.84863 5.74848C8.31725 5.27985 8.31725 4.52006 7.84863 4.05143C7.38 3.5828 6.6202 3.5828 6.15157 4.05143ZM7.0001 10.5C7.44192 10.5 7.8001 10.1418 7.8001 9.69998C7.8001 9.25815 7.44192 8.89997 7.0001 8.89997C6.55827 8.89997 6.2001 9.25815 6.2001 9.69998C6.2001 10.1418 6.55827 10.5 7.0001 10.5Z'
                    fill='#D1D5DB'
                  />
                </svg>
              </span>
            </Tooltip>
          </div>
          <input
            type='text'
            value={archivedOrdersSettings.custom_menu_label}
            onChange={(e) => handleInputChange('custom_menu_label', e.target.value)}
            placeholder={t('archived_orders_placeholder')}
            className='arcm-w-1/2 arcm-px-4 arcm-py-3 arcm-border arcm-border-gray-300 arcm-rounded-lg arcm-text-sm arcm-bg-white focus:arcm-outline-none focus:arcm-border-[#3858e9] focus:arcm-ring-1 focus:arcm-ring-[#3858e9] arcm-transition-colors'
          />
        </div>
      )}
    </>
  )
}

export default ArchivedOrdersSettings