import { Notification } from '@arco-design/web-vue';
import { downloadByUrl } from '@/utils/tools';
import { IconLoading } from '@arco-design/web-vue/es/icon';


import icon1 from '@/assets/img/media-account/icon-warn-1.png';
import icon2 from '@/assets/img/media-account/icon-success.png';

interface RenderNotificationData {
  total_number: number;
  success_number: number;
  fail_number: number;
  file?: string;
}

export function showExportNotification(label: string, { id =  '', duration = 3000}) {
  Notification.warning({
    id,
    showIcon: false,
    closable: true,
    content: () => (
      <div class="flex items-center">
        <IconLoading size={16} class="color-#6D4CFE mr-8px" />
        <p class="text-14px lh-22px font-400 color-#211F24">{label}</p>
      </div>
    ),
    duration,
    class: 'px-16px py-9px w-400px rounded-2px bg-#F0EDFF',
  });
}

export const showImportResultNotification = (data: RenderNotificationData) => {
  const { total_number, success_number, fail_number, file } = data;
  const hasError = fail_number > 0;
  const handleDownloadError = (file?: string) => {
    file && downloadByUrl(file);
  };

  Notification.warning({
    showIcon: false,
    closable: true,
    content: () => (
      <div>
        <div class="flex items-center mb-4px">
          <img src={hasError ? icon1 : icon2} width="16" height="16" class="mr-8px" />
          <span class="text-16px lh-24px font-400 color-#211F24">导入完成</span>
        </div>
        <p class="text-14px lh-22px font-400 color-#211F24">
          共导入 {total_number} 个账号，导入成功 {success_number} 个
          {hasError && (
            <span>
              ，失败 <span class="color-#F64B31">{fail_number}</span> 个
            </span>
          )}
        </p>
        {hasError && (
          <div
            class="mt-8px text-14px lh-22px font-400 color-#6D4CFE cursor-pointer"
            onClick={() => handleDownloadError(file)}
          >
            下载问题表格
          </div>
        )}
      </div>
    ),
    duration: 3000,
    class: `px-16px py-16px w-400px rounded-2px ${hasError ? 'bg-#FFF7E5' : 'bg-#EBF7F2'}`,
  });
};