Untitled

import React, { useState, useCallback } from 'react';
import { useForm } from 'react-hook-form';
import tw from 'date-fns/locale/zh-TW';
import dayjs from 'dayjs';
import {Datepicker} from 'baseui/datepicker';


import { useMutation } from '@apollo/react-hooks';
import { useDrawerDispatch } from '../../context/DrawerContext';
import { Scrollbars } from 'react-custom-scrollbars';
import Input from '../../components/Input/Input';
import Select from '../../components/Select/Select';
import Button, { KIND } from '../../components/Button/Button';
import DrawerBox from '../../components/DrawerBox/DrawerBox';
import { Row, Col } from '../../components/FlexBox/FlexBox';
import {
  Form,
  DrawerTitleWrapper,
  DrawerTitle,
  FieldDetails,
  ButtonGroup,
} from '../DrawerItems/DrawerItems.style';
import { FormFields, FormLabel } from '../../components/FormFields/FormFields';
import {request} from '../../utils/request';

const options = [
  { value: '1', name: 'Type 1', id: '1' },
  { value: '2', name: 'Type 2', id: '2' },
  { value: '3', name: 'Type 3', id: '3' },
];
type Props = any;

const AddCoupons: React.FC<Props> = props => {
  const dispatch = useDrawerDispatch();
  const closeDrawer = useCallback(() => dispatch({ type: 'CLOSE_DRAWER' }), [
    dispatch,
  ]);

  const { register, handleSubmit } = useForm();
  const [category, setCategory] = useState([]);
  const [type,setType] = useState([]);
  const [commodity,setCommodity] = useState('');
  const [value,setValue] = useState(-1);
  const [limit,setLimit] = useState(-1);
  const [today, setToday] = useState(new Date());

  const [date,setDate] = useState([new Date(dayjs().subtract(dayjs().day(), "day").format("YYYY-MM-DD")), new Date(dayjs(today).add( 6 - dayjs().day(), "day").format("YYYY-MM-DD"))]);

  function renderCouponForm(){
      if(type.length!==0){
          const _type = type[0].value
          switch(_type){
            case '1':
                return(
                <FormLabel>選擇品項</FormLabel>
                )
                break
            case '2':
                return(
                    <>
                    <FormLabel>滿多少折多少</FormLabel>
                    <p>滿</p>
                    <Input
                        type="number"
                        onChange={handleValue}
                    />
                    <p>折</p>
                    <Input
                        type="number"
                        onChange={handleLimit}
                    />
                    </>
                )
                break
            case '3':
                return(
                    <>
                    <p>打幾折</p>
                    <Input
                        type="number"
                        onChange={handleValue}
                    />
                    </>
                )
            
          }
          
      }
  }

  

  const handleCouponType = ({ value }) => {
      setType(value)
  }

  const handleValue = (event) => {
      console.log("---",event.target.value);
     setValue(event.target.value)
  }

  const handleLimit = (event) => {
    setLimit(event.target.value)
  }
  function handleDate({date}) {
    console.log("---",date)
    setDate(date);
  }
  const onSubmit = async () => {
    let data={
        type:type,
        value:value,
        limit:limit,
        end_time:'2021-12-14 16:12:00'
    }
    const response = await request.post(`/barcode`,data)
    console.log(response)
    closeDrawer();
   
  };
  

  return (
    <>
      <DrawerTitleWrapper>
        <DrawerTitle>Add Coupons</DrawerTitle>
      </DrawerTitleWrapper>

      <Form onSubmit={handleSubmit(onSubmit)} style={{ height: '100%' }}>
        <Scrollbars
          autoHide
          renderView={props => (
            <div {...props} style={{ ...props.style, overflowX: 'hidden' }} />
          )}
          renderTrackHorizontal={props => (
            <div
              {...props}
              style={{ display: 'none' }}
              className="track-horizontal"
            />
          )}
        >
          <Row>
            <Col lg={4}>
              <FieldDetails>
                新增優惠券：
                <ol>
                    <li>type1：指定商品免費</li>
                    <li>type2：滿多少折抵多少</li>
                    <li>type3：打幾折</li>
                </ol>
              </FieldDetails>
            </Col>

            <Col lg={8}>
              <DrawerBox>
                <FormFields>
                  <FormLabel>優惠券名稱</FormLabel>
                   
                     <Select
                        options={options}
                        labelKey="name"
                        valueKey="value"
                        placeholder="選擇折扣種類"
                        value={type}
                        searchable={false}
                        onChange={handleCouponType}
                        overrides={{
                            Placeholder: {
                              style: ({ $theme }) => {
                                return {
                                  ...$theme.typography.fontBold14,
                                  color: $theme.colors.textNormal,
                                };
                              },
                            },
                            DropdownListItem: {
                              style: ({ $theme }) => {
                                return {
                                  ...$theme.typography.fontBold14,
                                  color: $theme.colors.textNormal,
                                };
                              },
                            },
                            OptionContent: {
                              style: ({ $theme, $selected }) => {
                                return {
                                  ...$theme.typography.fontBold14,
                                  color: $selected
                                    ? $theme.colors.textDark
                                    : $theme.colors.textNormal,
                                };
                              },
                            },
                            SingleValue: {
                              style: ({ $theme }) => {
                                return {
                                  ...$theme.typography.fontBold14,
                                  color: $theme.colors.textNormal,
                                };
                              },
                            },
                            Popover: {
                              props: {
                                overrides: {
                                  Body: {
                                    style: { zIndex: 5 },
                                  },
                                },
                              },
                            },
                          }}
                    />

                </FormFields>
                <FormFields>
                    <FormLabel>優惠券使用時段</FormLabel>
                    <Datepicker
                            locale={tw}
                            value={date}
                            onChange={handleDate}
                            range
                        />
                    {/* <Col md={8} >

                    </Col> */}
                </FormFields>

                {renderCouponForm()}
                {/* <FormFields>
                  <FormLabel>Discount Code</FormLabel>
                  <Input inputRef={register({ required: true })} name="code" />
                </FormFields>

                <FormFields>
                  <FormLabel>Number of Coupon</FormLabel>
                  <Input
                    type="number"
                    inputRef={register({ required: true })}
                    name="number_of_coupon"
                  />
                </FormFields>

                <FormFields>
                  <FormLabel>Category</FormLabel>
                  <Select
                    options={options}
                    labelKey="name"
                    valueKey="value"
                    placeholder="Ex: Choose parent category"
                    value={category}
                    searchable={false}
                    onChange={handleCategoryChange}
                    overrides={{
                      Placeholder: {
                        style: ({ $theme }) => {
                          return {
                            ...$theme.typography.fontBold14,
                            color: $theme.colors.textNormal,
                          };
                        },
                      },
                      DropdownListItem: {
                        style: ({ $theme }) => {
                          return {
                            ...$theme.typography.fontBold14,
                            color: $theme.colors.textNormal,
                          };
                        },
                      },
                      OptionContent: {
                        style: ({ $theme, $selected }) => {
                          return {
                            ...$theme.typography.fontBold14,
                            color: $selected
                              ? $theme.colors.textDark
                              : $theme.colors.textNormal,
                          };
                        },
                      },
                      SingleValue: {
                        style: ({ $theme }) => {
                          return {
                            ...$theme.typography.fontBold14,
                            color: $theme.colors.textNormal,
                          };
                        },
                      },
                      Popover: {
                        props: {
                          overrides: {
                            Body: {
                              style: { zIndex: 5 },
                            },
                          },
                        },
                      },
                    }}
                  />
                </FormFields>

                <FormFields>
                  <FormLabel>Minimum Amount Required</FormLabel>
                  <Input
                    type="number"
                    inputRef={register}
                    name="minimum_amount"
                  />
                </FormFields> */}
              </DrawerBox>
            </Col>
          </Row>
        </Scrollbars>

        <ButtonGroup>
          <Button
            kind={KIND.minimal}
            onClick={closeDrawer}
            overrides={{
              BaseButton: {
                style: ({ $theme }) => ({
                  width: '50%',
                  borderTopLeftRadius: '3px',
                  borderTopRightRadius: '3px',
                  borderBottomRightRadius: '3px',
                  borderBottomLeftRadius: '3px',
                  marginRight: '15px',
                  color: $theme.colors.red400,
                }),
              },
            }}
          >
            Cancel
          </Button>

          <Button
            type="submit"
            overrides={{
              BaseButton: {
                style: ({ $theme }) => ({
                  width: '50%',
                  borderTopLeftRadius: '3px',
                  borderTopRightRadius: '3px',
                  borderBottomRightRadius: '3px',
                  borderBottomLeftRadius: '3px',
                }),
              },
            }}
          >
            Create Campaign
          </Button>
        </ButtonGroup>
      </Form>
    </>
  );
};

export default AddCoupons;