"use client";
import * as React from "react";
import Grid from "@mui/material/Grid";
import { useState } from 'react'
import Paper from "@mui/material/Paper";
import { TFunction } from "i18next";
import { useTranslation } from "react-i18next";
import {Card,CardHeader}  from '@mui/material';
import CustomSearchForm from "../CustomSearchForm/CustomSearchForm";
import CustomDatagrid from '../CustomDatagrid/CustomDatagrid';
import '../../app/global.css';

const ProgressByClient: React.FC = () => {
  const [activeTab, setActiveTab] = useState('financialSummary');
  const [SearchCriteria, setSearchCriteria] = React.useState({})
  const { t } = useTranslation("dashboard");

  const [clientCode, setClientCode] = useState('');
  const [clientName, setClientName] = useState('');
  const [subsidiaryClientCode, setSubsidiaryClientCode] = useState('');
  const [subsidiaryClientName, setSubsidiaryClientName] = useState('');
  const [dropdownDemo, setDropdownDemo] = useState('');
  const [dateDemo, setDateDemo] = useState(null);
  const [checkboxDemo, setCheckboxDemo] = useState(false);
  const [receiptFromDate, setReceiptFromDate] = useState(null);
  const [receiptToDate, setReceiptToDate] = useState(null);
  const rows = [{id: 1,processNo:"1",processDescription:"把豬頸背肉絲解凍及洗淨隔乾水份", mat:"豬頸背肉絲", matLot:"Lot001", actlQty:"11.30",unit: "kg", equipment:"解凍盤",operator:"HKPC01"},
  {id: 2,processNo:"2",processDescription:"加入調味料作腌製", mat:"洋葱", matLot:"Lot002", actlQty:"2.20",unit: "kg", equipment:"調味盤",operator:"HKPC01"},
  {id: 3,processNo:"3",processDescription:"加入調味料作腌製", mat:"茄膏", matLot:"Lot003", actlQty:"50.00",unit: "g", equipment:"調味盤",operator:"HKPC01"},
  {id: 4,processNo:"4",processDescription:"加入調味料作腌製", mat:"家樂牌黃汁粉", matLot:"Lot004", actlQty:"500.00",unit: "g", equipment:"調味盤",operator:"HKPC01"},
  {id: 5,processNo:"5",processDescription:"放入0-4度雪櫃暫存備用", mat:"-", matLot:"-", actlQty:"-",unit: "-", equipment:"雪櫃",operator:"HKPC01"},
  {id: 6,processNo:"6",processDescription:"洋葱洗淨切碎備用", mat:"洋葱", matLot:"Lot002", actlQty:"131.00",unit: "g", equipment:"切割機",operator:"HKPC01"},
  {id: 7,processNo:"7",processDescription:"用蒸焗爐煮至熟透", mat:"-", matLot:"-", actlQty:"-",unit: "-", equipment:"蒸焗爐",operator:"HKPC01"},]

  const columns = [
      {
        id: 'processNo',
        field: 'processNo',
        headerName: "工序次序",
        flex: 0.7,
    },
    {
        id: 'processDescription',
        field: 'processDescription',
        headerName: "工序描述",
        flex: 1,
    },
    {
      id: 'mat',
      field: 'mat',
      headerName: "原料",
      flex: 1,
    },
    {
      id: 'matLot',
      field: 'matLot',
      headerName: "原料批次",
      flex: 1,
    },
    {
      id: 'actlQty',
      field: 'actlQty',
      headerName: "投入數量",
      flex: 0.7,
      align: "right",
      headerAlign: 'right',
    },
    {
      id: 'unit',
      field: 'unit',
      headerName: "單位",
      flex: 0.7,
      align: "left",
      headerAlign: 'left',
    },
    {
      id: 'equipment',
      field: 'equipment',
      headerName: "設備",
      flex: 1,
    },
    {
      id: 'operator',
      field: 'operator',
      headerName: "操作人員",
      flex: 1,
    },
    
  ];

  const InputFields = [
    { id: "clientCode", label: "Client Code", type: 'text', value: clientCode, setValue: setClientCode },
    { id: "clientName", label: "Client Name", type: 'text', value: clientName, setValue: setClientName },
    { id: "subsidiaryClientCode", label: "Subsidiary Client Code", type:'text', value:subsidiaryClientCode, setValue: setSubsidiaryClientCode},
    { id: "subsidiaryClientName", label: "Subsidiary Client Name", type:'text', value:subsidiaryClientName, setValue: setSubsidiaryClientName},
    // { id: 'dropdownDemo', label: "dropdownDemo", type: 'dropdown', options: [{id:"1", label:"1"}], value: dropdownDemo, setValue: setDropdownDemo },
    // { id: 'dateDemo', label:'dateDemo', type: 'date', value: dateDemo, setValue: setDateDemo },
    // { id: 'checkboxDemo', label:'checkboxDemo', type: 'checkbox', value: checkboxDemo, setValue: setCheckboxDemo },
    // { id: ['receiptFromDate','receiptToDate'], label: ["收貨日期","收貨日期"], value: [receiptFromDate ? receiptFromDate : null, receiptToDate ? receiptToDate : null],
    //     setValue: [setReceiptFromDate, setReceiptToDate],type: 'dateRange' },
  ];

  const applySearch = (data: any) => {
    console.log(data)
    setSearchCriteria(data)
  }
  return (
      <Grid item sm>
            <CustomSearchForm applySearch={applySearch} fields={InputFields}/>
            <CustomDatagrid Title={"工單工序詳情"} rows={rows} columns={columns} columnWidth={200} />
      </Grid>
  );
};

export default ProgressByClient;