Briven/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/BasicInfo.tsx

import dayjs from 'dayjs'
import { useEffect, useState } from 'react'
import { Control, ControllerRenderProps } from 'react-hook-form'
import {
  FormControl,
  FormField,
  Input,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  WarningIcon,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'

import {
  CUSTOM_EXPIRY_VALUE,
  EXPIRES_AT_OPTIONS,
  NON_EXPIRING_TOKEN_VALUE,
} from '../../AccessToken.constants'
import { type TokenFormValues } from '../../AccessToken.schemas'
import { DatePicker } from '@/components/ui/DatePicker'

interface BasicInfoProps {
  control: Control<TokenFormValues>
  expirationDate: string
  onCustomDateChange?: (date: { date: string } | undefined) => void
  onCustomExpiryChange?: (isCustom: boolean) => void
}

export const BasicInfo = ({
  control,
  expirationDate,
  onCustomDateChange,
  onCustomExpiryChange,
}: BasicInfoProps) => {
  const [customDate, setCustomDate] = useState<Date>()
  const [isCustomSelected, setIsCustomSelected] = useState(false)

  useEffect(() => {
    const isCustom = expirationDate === CUSTOM_EXPIRY_VALUE
    setIsCustomSelected(isCustom)
    onCustomExpiryChange?.(isCustom)
  }, [expirationDate, onCustomExpiryChange])

  const handleCustomDateChange = (date: Date | undefined) => {
    setCustomDate(date)
    if (date) {
      onCustomDateChange?.({ date: date.toISOString() })
    } else {
      onCustomDateChange?.(undefined)
    }
  }

  const handleExpiryChange = (
    value: string,
    field: ControllerRenderProps<TokenFormValues, 'expiresAt'>
  ) => {
    const isCustom = value === CUSTOM_EXPIRY_VALUE
    setIsCustomSelected(isCustom)
    onCustomExpiryChange?.(isCustom)
    field.onChange(value)
  }

  return (
    <div className="space-y-4 px-5 sm:px-6 py-6">
      <FormField
        key="tokenName"
        name="tokenName"
        control={control}
        render={({ field }) => (
          <FormItemLayout name="tokenName" label="Name">
            <FormControl>
              <Input id="tokenName" {...field} placeholder="Provide a name for your token" />
            </FormControl>
          </FormItemLayout>
        )}
      />

      <FormField
        key="expiresAt"
        name="expiresAt"
        control={control}
        render={({ field }) => (
          <FormItemLayout name="expiresAt" label="Expires in">
            <div className="flex gap-2">
              <FormControl className="grow">
                <Select
                  value={field.value}
                  onValueChange={(value) => handleExpiryChange(value, field)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Expires at" />
                  </SelectTrigger>
                  <SelectContent>
                    {Object.values(EXPIRES_AT_OPTIONS).map(
                      (option: { value: string; label: string }) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem>
                      )
                    )}
                  </SelectContent>
                </Select>
              </FormControl>
              {isCustomSelected && (
                <DatePicker
                  selectsRange={false}
                  triggerButtonSize="small"
                  contentSide="top"
                  minDate={new Date()}
                  maxDate={dayjs().add(1, 'year').toDate()}
                  onChange={(date) => {
                    const selectedDate = date.to || date.from
                    if (selectedDate) {
                      handleCustomDateChange(new Date(selectedDate))
                    } else {
                      handleCustomDateChange(undefined)
                    }
                  }}
                >
                  {customDate ? `${dayjs(customDate).format('DD MMM, HH:mm')}` : 'Select date'}
                </DatePicker>
              )}
            </div>
            {field.value === NON_EXPIRING_TOKEN_VALUE && (
              <div className="w-full flex gap-x-2 items-center mt-3 mx-0.5">
                <WarningIcon />
                <span className="text-xs text-left text-foreground-lighter">
                  Make sure to keep your non-expiring token safe and secure.
                </span>
              </div>
            )}
          </FormItemLayout>
        )}
      />
    </div>
  )
}