import { Button, DatePicker, Form, Input, InputNumber, Switch } from "antd";
import moment from "moment";
import React from "react";
import { useTranslation } from "react-i18next";

export default function ShopEmployeesFormComponent({
  form,
  selectedEmployee,
  handleFinish
}) {
  const { t } = useTranslation();

  if (!selectedEmployee) return "//TODO No employee selected.";

  return (
    <Form
      onFinish={handleFinish}
      autoComplete={"off"}
      form={form}
      initialValues={{
        ...selectedEmployee,
        hire_date: selectedEmployee.hire_date
          ? moment(selectedEmployee.hire_date)
          : null,
        termination_date: selectedEmployee.termination_date
          ? moment(selectedEmployee.termination_date)
          : null
      }}
    >
      <Button type="primary" htmlType="submit">
        {t("general.actions.save")}
      </Button>

      <Form.Item
        name="first_name"
        label={t("employees.fields.first_name")}
        rules={[
          {
            required: true,
            message: t("general.validation.required")
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label={t("employees.fields.last_name")}
        name="last_name"
        rules={[
          {
            required: true,
            message: t("general.validation.required")
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="employee_number"
        label={t("employees.fields.employee_number")}
        rules={[
          {
            required: true,
            message: t("general.validation.required")
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label={t("employees.fields.active")}
        valuePropName="checked"
        name="active"
      >
        <Switch />
      </Form.Item>
      <Form.Item
        label={t("employees.fields.flat_rate")}
        name="active"
        valuePropName="checked"
      >
        <Switch />
      </Form.Item>
      <Form.Item
        name="hire_date"
        label={t("employees.fields.hire_date")}
        rules={[
          {
            required: true,
            message: t("general.validation.required")
          }
        ]}
      >
        <DatePicker />
      </Form.Item>
      <Form.Item
        label={t("employees.fields.termination_date")}
        name="termination_date"
      >
        <DatePicker />
      </Form.Item>
      {
        //TODO Make this a picklist.
      }
      <Form.Item
        label={t("employees.fields.cost_center")}
        name="cost_center"
        rules={[
          {
            required: true,
            message: t("general.validation.required")
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label={t("employees.fields.base_rate")}
        name="base_rate"
        rules={[
          {
            required: true,
            message: t("general.validation.required")
          }
        ]}
      >
        <InputNumber />
      </Form.Item>
    </Form>
  );
}
