'use client'
import React, { FC } from 'react'
import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import type { SavedMessage } from '@/models/debug'
import { Markdown } from '@/app/components/base/markdown'
import { SimpleBtn, copyIcon } from '@/app/components/app/text-generate/item'
import copy from 'copy-to-clipboard'
import Toast from '@/app/components/base/toast'
import NoData from './no-data'

export interface ISavedItemsProps {
  className?: string
  list: SavedMessage[],
  onRemove: (id: string) => void
  onStartCreateContent: () => void
}

const removeIcon = (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.25 1.75H8.75M1.75 3.5H12.25M11.0833 3.5L10.6742 9.63625C10.6129 10.5569 10.5822 11.0172 10.3833 11.3663C10.2083 11.6735 9.94422 11.9206 9.62597 12.0748C9.26448 12.25 8.80314 12.25 7.88045 12.25H6.11955C5.19686 12.25 4.73552 12.25 4.37403 12.0748C4.05577 11.9206 3.79172 11.6735 3.61666 11.3663C3.41781 11.0172 3.38713 10.5569 3.32575 9.63625L2.91667 3.5M5.83333 6.125V9.04167M8.16667 6.125V9.04167" stroke="#344054" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
)

const SavedItems: FC<ISavedItemsProps> = ({
  className,
  list,
  onRemove,
  onStartCreateContent
}) => {
  const { t } = useTranslation()

  return (
    <div className={cn(className, 'space-y-3')}>
      {list.length === 0 ? (
        <div className='px-6'>
          <NoData onStartCreateContent={onStartCreateContent} />
        </div>
      ) : (<>
        {list.map(({ id, answer }) => (
          <div
            key={id}
            className='p-4 rounded-xl  bg-gray-50'
            style={{
              boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)'
            }}
          >
            <Markdown content={answer} />
            <div className='flex items-center justify-between mt-3'>
              <div className='flex items-center space-x-2'>
                <SimpleBtn
                  className='space-x-1'
                  onClick={() => {
                    copy(answer)
                    Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
                  }}>
                  {copyIcon}
                  <div>{t('common.operation.copy')}</div>
                </SimpleBtn>

                <SimpleBtn
                  className='space-x-1'
                  onClick={() => {
                    onRemove(id)
                  }}>
                  {removeIcon}
                  <div>{t('common.operation.remove')}</div>
                </SimpleBtn>
              </div>
              <div className='text-xs text-gray-500'>{answer?.length} {t('common.unit.char')}</div>
            </div>
          </div>
        ))}
      </>)}

    </div>
  )
}
export default React.memo(SavedItems)
