import { observer } from 'mobx-react-lite'

// import moved inside component to avoid dependency cycle
import Block from './Block'
import SpinningLoader from './SpinningLoader'
import Text from './Text'

type SyncProgressToastProps = {
  title?: string
}

const SyncProgressToast = observer((props: SyncProgressToastProps) => {
  // Dynamically import bleStore to break dependency cycle
  const { bleStore } = require('@/stores')
  const { transferProgress } = bleStore.state
  const { title = '正在同步文件' } = props || {}

  const progressHint = Number(transferProgress) <= 0 ? title : `${title}，进度 ${transferProgress.toFixed(2)}%`
  return (
    <Block
      className="flex w-full flex-row items-center justify-center border-[3px] border-white bg-black"
      style={{ paddingVertical: 14, transform: [{ skewX: '-6deg' }] }}
    >
      <SpinningLoader />
      <Block style={{ marginLeft: 8 }}>
        <Text className="font-[black] text-[14px] text-white">{progressHint}</Text>
      </Block>
    </Block>
  )
})

export default SyncProgressToast