import React, { useState, useEffect } from 'react'
import arcmIcons from '../Icons'
import { makeApiRequest } from '../common'
import { Select } from 'antd'
import ArchiveRangeSelect from '../components/ArchiveRangeSelect'
import PieChart from '../components/core/PieChart'
import { useTranslations } from '../hooks/useTranslation'

const Onboarding = ({
  onvVeiwChange,
  totalOrderToArchive,
  totalOrder,
  olderSchedule,
  setTotalOrderToArchive,
  ...props
}) => {
  const { t } = useTranslations()

  const geOrderToArchive = async (value, dateRange) => {
    try {
      const orders = await makeApiRequest('site-order-byschecdule', 'POST', {
        archive_range: value,
        archive_range_datetime: dateRange
      })

      if (orders.success) {
        const { ordersToarchive, olderThenSchedule } = orders.data
        setTotalOrderToArchive(parseInt(ordersToarchive))
      }
    } catch (error) {
      alert(error)
    }
  }

  

  useEffect(() => {
    console.log('Onboarding Component')
    console.log(olderSchedule)
  }, [])

  return (
    <div className='wooarchive-settings__onboarding arcm-w-full arcm-min-h-[500px] sm:arcm-min-h-[600px] arcm-flex arcm-justify-center arcm-items-center'>
      <div className=' arcm-text-center'>
        <div className='arcm-text-gray-800 arcm-text-2xl arcm-font-bold arcm-mb-8'>
          {t('welcome_title')}
        </div>
        <div className=' arcm-w-full sm:arcm-w-[552px] arcm-p-6 arcm-pt-4 arcm-bg-[#eff4fb] arcm-rounded-2xl'>
          <div className='chart-wrap arcm-text-center'>
            <PieChart
              className='arcm-h-[173px] arcm-w-[173px] arcm-mb-1.5 arcm-ml-auto arcm-mr-auto'
              value={totalOrderToArchive}
              remainingValue={totalOrder}
              color='#F7416E'
            />
            <div className='arcm-text-gray-800 arcm-text-base arcm-font-bold arcm-mb-1.5 arcm-ml-auto arcm-mr-auto'>
              <span className='arcm-text-[#f6406e]'>
                {totalOrderToArchive} {t('orders_can_be_archived')}
              </span>
            </div>
            <div className="arcm-flex arcm-items-center arcm-justify-center arcm-my-4">
              <label className="arcm-text-gray-600 arcm-text-xs arcm-font-normal arcm-mb-0 arcm-mr-2" style={{ whiteSpace: 'nowrap' }}>
                {t('older_than')}
              </label>
              <ArchiveRangeSelect
                t={t}
                defaultValue={olderSchedule}
                onChange={geOrderToArchive}
                className="arcm-select arcm-text-gray-400 arcm-text-left arcm-text-sm arcm-font-normal arcm-w-[180px]"
                variant="onboarding"
                isPro={true}
              />
            </div>
          </div>

          <div className='arcm-px-4 arcm-py-6 arcm-bg-white arcm-rounded-2xl arcm-mt-6'>
            <div className='arcm-text-gray-800 arcm-text-base arcm-font-bold arcm-mb-1.5'>
              {t('archive_old_orders')}
            </div>
            <div className='arcm-text-gray-600 arcm-text-sm arcm-font-normal arcm-mb-4'>
              {t('speed_up_site')}
            </div>
            <button
              onClick={() => onvVeiwChange('archive_settings')}
              className='arcm-text-white arcm-text-xs sm:arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-3 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'
            >
              <span>{t('archive_now')}</span>
              <span>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  width='18'
                  height='15'
                  viewBox='0 0 18 15'
                  fill='none'
                >
                  <path
                    d='M10.25 1.25L16.5 7.5M16.5 7.5L10.25 13.75M16.5 7.5H1.5'
                    stroke='white'
                    stroke-width='1.5'
                    stroke-linecap='round'
                    stroke-linejoin='round'
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>

        <div className='arcm-divider arcm-text-gray-600 arcm-text-sm arcm-font-normal arcm-my-6 md:arcm-my-8'>
          {t('or')}
        </div>

        <div className='arcm-export-orders'>
          <div className='arcm-text-gray-800 arcm-text-base arcm-font-bold arcm-mb-1.5'>
            {t('export_orders_title')}
          </div>
          <div className='arcm-text-gray-600 arcm-text-sm arcm-font-normal arcm-mb-4'>
            {t('export_orders_desc')}
          </div>
          <button
            onClick={() => onvVeiwChange('export_orders')}
            className='arcm-text-[#3858e9] arcm-text-xs sm:arcm-text-sm arcm-font-semibold arcm-px-4 arcm-py-3 arcm-border arcm-border-[#3858e9] arcm-rounded-lg arcm-justify-center arcm-items-center arcm-gap-2 arcm-inline-flex arcm-transition-all arcm-group hover:arcm-bg-[#3858e9] hover:arcm-text-white'
          >
            <span className='icon'>
              <svg
                xmlns='http://www.w3.org/2000/svg'
                width='18'
                height='18'
                viewBox='0 0 18 18'
                fill='none'
              >
                <path
                  className='arcm-transition-all group-hover:arcm-stroke-white'
                  d='M1.5 12.75V14.625C1.5 15.6605 2.33947 16.5 3.375 16.5H14.625C15.6605 16.5 16.5 15.6605 16.5 14.625V12.75M12.75 9L9 12.75M9 12.75L5.25 9M9 12.75V1.5'
                  stroke='#3858E9'
                  stroke-width='1.5'
                  stroke-linecap='round'
                  stroke-linejoin='round'
                />
              </svg>
            </span>
            <span>{t('export_orders_btn')}</span>
          </button>
        </div>
      </div>
    </div>
  )
}

export default Onboarding