import { Box, TextField } from "@mui/material"

//  日付文字列（時間を含む可能性がある）から日付部分だけを返す
const parseDate = ((date: string) => date ? date.substring(0, 10) : '')

//  今日の日付
const today = parseDate(new Date().toISOString());

//  日付文字列で早いほうを返す（空でないものは除く）
const validateBuyDate = ((buyDate: string) => {
  // console.log('validateBuyDate:', buyDate)
  if (!buyDate) { // 購入日が未設定の場合は今日の日付を入れておく
    return today;
  }
  return parseDate(buyDate);
})

//  日付文字列で早いほうを返す（空でないものは除く）
const validateExpDate = ((buyDate: string, expDate: string | null) => {
  // console.log('validateExpDate:', buyDate, expDate)
  if (!expDate) { // 賞味期限が未設定の場合そのまま未設定にする
    return '';
  }
  const buyDateParsed = validateBuyDate(buyDate);
  const expDateParsed = parseDate(expDate);
  //  購入日以降となるようにする
  return buyDateParsed > expDateParsed ? buyDateParsed : expDateParsed;
})

const BuyExpDateSelect = ({
    newStock,
    setNewStock,
}: {
    newStock: {buyDate: string, expDate: string | null},
    setNewStock: (tobuy: {buyDate: string, expDate: string | null}) => void,
}) => {

  {/* 購入日・消費期限を横並びに */ }
  return <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
    {/* 購入日入力フィールド */}
    <TextField
      margin="dense"
      label="購入日"
      type="date"
      fullWidth
      value={validateBuyDate(newStock.buyDate)}
      onChange={(e) =>
        setNewStock({ ...newStock, buyDate: e.target.value })
      }
      InputLabelProps={{ shrink: true }}
      InputProps={{
        inputProps: {
          max: today,
        }
      }}
    />

    {/* 消費・賞味期限入力フィールド */}
    <TextField
      margin="dense"
      label="消費・賞味期限"
      type="date"
      fullWidth
      value={validateExpDate(newStock.buyDate, newStock.expDate)}
      onChange={(e) =>
        setNewStock({ ...newStock, expDate: e.target.value ?? null })
      }
      InputLabelProps={{ shrink: true }}
      InputProps={{
        inputProps: {
          min: validateBuyDate(newStock.buyDate),
        }
      }}
    />
   
  </Box>

}

export default BuyExpDateSelect;