import type { FC } from 'react'
import type { DatePickerFooterProps } from '../types'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { RiTimeLine } from '@remixicon/react'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { ViewType } from '../types'

const Footer: FC<DatePickerFooterProps> = ({
  needTimePicker,
  displayTime,
  view,
  handleClickTimePicker,
  handleSelectCurrentDate,
  handleConfirmDate,
}) => {
  const { t } = useTranslation()

  return (
    <div className={cn(
      'flex items-center justify-between border-t-[0.5px] border-divider-regular p-2',
      !needTimePicker && 'justify-end',
    )}
    >
      {/* Time Picker */}
      {needTimePicker && (
        <button
          type="button"
          className="flex items-center gap-x-px rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1.5 py-1
                      system-xs-medium text-components-button-secondary-accent-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]"
          onClick={handleClickTimePicker}
        >
          <RiTimeLine className="size-3.5" />
          {view === ViewType.date && <span>{displayTime}</span>}
          {view === ViewType.time && <span>{t('operation.pickDate', { ns: 'time' })}</span>}
        </button>
      )}
      <div className="flex items-center gap-x-1">
        {/* Now */}
        <button
          type="button"
          className="flex items-center justify-center px-1.5 py-1 system-xs-medium text-components-button-secondary-accent-text"
          onClick={handleSelectCurrentDate}
        >
          <span className="px-[3px]">{t('operation.now', { ns: 'time' })}</span>
        </button>
        {/* Confirm Button */}
        <Button
          variant="primary"
          size="small"
          className="w-16 px-1.5 py-1"
          onClick={handleConfirmDate}
        >
          {t('operation.ok', { ns: 'time' })}
        </Button>
      </div>
    </div>
  )
}

export default React.memo(Footer)