import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/Components/Preferences/PreferencesComponents'
import { Button } from '@/Components/Button/Button'
import { SyncQueueStrategy, dateToLocalizedString } from '@standardnotes/snjs'
import { STRING_GENERIC_SYNC_ERROR } from '@/Strings'
import { useState } from '@node_modules/preact/hooks'
import { observer } from 'mobx-react-lite'
import { WebApplication } from '@/UIModels/Application'
import { FunctionComponent } from 'preact'

type Props = {
  application: WebApplication
}

export const formatLastSyncDate = (lastUpdatedDate: Date) => {
  return dateToLocalizedString(lastUpdatedDate)
}

export const Sync: FunctionComponent<Props> = observer(({ application }: Props) => {
  const [isSyncingInProgress, setIsSyncingInProgress] = useState(false)
  const [lastSyncDate, setLastSyncDate] = useState(formatLastSyncDate(application.sync.getLastSyncDate() as Date))

  const doSynchronization = async () => {
    setIsSyncingInProgress(true)

    const response = await application.sync.sync({
      queueStrategy: SyncQueueStrategy.ForceSpawnNew,
      checkIntegrity: true,
    })
    setIsSyncingInProgress(false)
    if (response && (response as any).error) {
      application.alertService.alert(STRING_GENERIC_SYNC_ERROR).catch(console.error)
    } else {
      setLastSyncDate(formatLastSyncDate(application.sync.getLastSyncDate() as Date))
    }
  }

  return (
    <PreferencesGroup>
      <PreferencesSegment>
        <div className="flex flex-row items-center">
          <div className="flex-grow flex flex-col">
            <Title>Sync</Title>
            <Text>
              Last synced <span className="font-bold">on {lastSyncDate}</span>
            </Text>
            <Button
              className="min-w-20 mt-3"
              variant="normal"
              label="Sync now"
              disabled={isSyncingInProgress}
              onClick={doSynchronization}
            />
          </div>
        </div>
      </PreferencesSegment>
    </PreferencesGroup>
  )
})