import React, { useState } from 'react';
import {Card, Radio, Tabs} from 'antd';
import ProdutionOperationForm from './production-operation-form';
import { OperationTypeEnum, ProductionProcessTypeEnum } from '@gtpl/shared-models/common-models';

const { TabPane } = Tabs;


/* eslint-disable-next-line */
export interface ProductionOperationsProps {}

export const ProductionOperations = () => {

  const [tabName,setTabName] = useState<OperationTypeEnum>(OperationTypeEnum.BE_HEADING)
  const [processType,setProcessType] = useState<ProductionProcessTypeEnum>(ProductionProcessTypeEnum.FRESHPRODUCITON)

  const onTabChange = (val) => {
    setTabName(val)
  }

  const onProcessTypeChange = (e) => {
    console.log(e)
    setProcessType(e.target.value)
  }
 
  return (
    <Card  title={<span style={{ color: 'white' }}>Production Operations</span>}
    style={{ textAlign: 'center' }}
    headStyle={{ backgroundColor: '#69c0ff', border: 0 }} extra={<>
    <Radio.Group defaultValue={ProductionProcessTypeEnum.FRESHPRODUCITON} onChange={onProcessTypeChange}>
      <Radio value={ProductionProcessTypeEnum.REPROCESS} style={{color:'white'}}>Reprocess</Radio>
      <Radio value={ProductionProcessTypeEnum.FRESHPRODUCITON} style={{color:'white'}}>Fresh Production</Radio>
    </Radio.Group>
    </>}>
      <Tabs onChange={onTabChange}>
        <TabPane key={OperationTypeEnum.BE_HEADING} tab={OperationTypeEnum.BE_HEADING}>
          <ProdutionOperationForm tabName={tabName} processType={processType}/>
        </TabPane>
        <TabPane key={OperationTypeEnum.VALUE_ADDITION} tab={OperationTypeEnum.VALUE_ADDITION}>
          <ProdutionOperationForm tabName={tabName} processType={processType}/>
        </TabPane>
        <TabPane key={OperationTypeEnum.SOAKING} tab={OperationTypeEnum.SOAKING}>
          <ProdutionOperationForm tabName={tabName} processType={processType}/>
        </TabPane>
      </Tabs>

    </Card>
  );
}

export default ProductionOperations;