import DateTimeField from '@/components/common/DateTimeField'
import { FieldError } from '@/components/common/FieldError'
import Label from '@/components/common/Label'
import { Button } from '@/components/ui/button'

import type { FC } from 'react'

type Props = {
    disabled?:                boolean
    originalCreatedFrom:      string | null
    setOriginalCreatedFrom:   (x: string | null) => void
    originalCreatedBefore:    string | null
    setOriginalCreatedBefore: (x: string | null) => void
    errors?:                  string[] }


const PostOriginalCreatedTimeField: FC<Props> = (
    { disabled,
      originalCreatedFrom,
      setOriginalCreatedFrom,
      originalCreatedBefore,
      setOriginalCreatedBefore,
      errors }: Props,
) => (
    <div>
      <Label invalid={errors && errors.length > 0}>オリジナルの作成日時</Label>

      <div className="my-1 flex">
	<div className="w-80">
	  <DateTimeField
	      className="mr-2"
	      disabled={disabled ?? false}
	      aria-invalid={errors && errors.length > 0}
	      invalid={errors && errors.length > 0}
	      value={originalCreatedFrom ?? undefined}
	      onChange={setOriginalCreatedFrom}
	      onBlur={ev => {
		const v = ev.target.value
		if (!(v))
		  return

		const d = new Date (v)
		if (d.getMinutes () === 0 && d.getHours () === 0)
		  d.setDate (d.getDate () + 1)
		else
		  d.setMinutes (d.getMinutes () + 1)
		setOriginalCreatedBefore (d.toISOString ())
	      }}/>
	  以降
	</div>
	<div>
	  <Button
	      className="bg-gray-600 text-white rounded"
	      disabled={disabled}
	      onClick={() => {
		setOriginalCreatedFrom (null)
	      }}>
	    リセット
	  </Button>
	</div>
      </div>

      <div className="my-1 flex">
	<div className="w-80">
	  <DateTimeField
	      className="mr-2"
	      disabled={disabled}
	      aria-invalid={errors && errors.length > 0}
	      invalid={errors && errors.length > 0}
	      value={originalCreatedBefore ?? undefined}
	      onChange={setOriginalCreatedBefore}/>
	  より前
	</div>
	<div>
	  <Button
	      className="bg-gray-600 text-white rounded"
	      disabled={disabled}
	      onClick={() => {
		setOriginalCreatedBefore (null)
	      }}>
	    リセット
	  </Button>
	</div>
      </div>

      <FieldError messages={errors}/>
    </div>)

export default PostOriginalCreatedTimeField
