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

import type { FC } from 'react'

type Props = {
    originalCreatedFrom:      string | null
    setOriginalCreatedFrom:   (x: string | null) => void
    originalCreatedBefore:    string | null
    setOriginalCreatedBefore: (x: string | null) => void }


export default (({ originalCreatedFrom,
		   setOriginalCreatedFrom,
		   originalCreatedBefore,
		   setOriginalCreatedBefore }: Props) => (
    <div>
      <Label>オリジナルの作成日時</Label>
      <div className="my-1 flex">
	<div className="w-80">
	  <DateTimeField
	      className="mr-2"
	      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"
	      onClick={() => {
		setOriginalCreatedFrom (null)
	      }}>
	    リセット
	  </Button>
	</div>
      </div>
      <div className="my-1 flex">
	<div className="w-80">
	  <DateTimeField
	      className="mr-2"
	      value={originalCreatedBefore ?? undefined}
	      onChange={setOriginalCreatedBefore}/>
	  より前
	</div>
	<div>
	  <Button
	      className="bg-gray-600 text-white rounded"
	      onClick={() => {
		setOriginalCreatedBefore (null)
	      }}>
	    リセット
	  </Button>
	</div>
      </div>
    </div>)) satisfies FC<Props>