// ** React Imports

import { ChangeEvent, forwardRef, useEffect, useState } from "react";

// ** MUI Imports
import Autocomplete from "@mui/material/Autocomplete";
import Box, { BoxProps } from "@mui/material/Box";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";
import Grid from "@mui/material/Grid";
import Input from "@mui/material/Input";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { styled } from "@mui/material/styles";

// ** Third Party Imports

import { yupResolver } from "@hookform/resolvers/yup";
import { Controller, useForm } from "react-hook-form";
import * as yup from "yup";

// ** Icon Imports
import Icon from "src/@core/components/icon";

// ** Store Imports
import { useDispatch, useSelector } from "react-redux";

// ** Actions Imports
import { RootState, AppDispatch } from "src/store";
// ** Types Imports
import { DialogActions } from "@mui/material";
import InputAdornment from "@mui/material/InputAdornment";
import format from "date-fns/format";
import { toast } from "react-hot-toast";
import HeaderIcon from "src/@core/layouts/components/header-icon";
import { addCompany } from "src/store/apps/company";
import { DateType } from "src/types/forms/reactDatepickerTypes";
import { fetchData, getData } from "src/store/apps/appMaster";

// ** Import Component
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";

interface SidebarAddCompanyType {
open: boolean;
toggle: () => void;
}

interface PickerProps {
start: Date | number;
end: Date | number;
}

interface CompanyData {
 address: string;
app_id: number;
color: string;
contract_end_date: string;
contract_start_date: string;
contract_value: number;
cpm: number;
email: string;
impression: number;
include_dapil?: boolean;
include_disclaimer?: boolean;
mh_secret_key: string;
logo: string;
name: string;
phone: string;
pic_email: string;
parent_id: number;
referral_code: string;
pic_name: string;
pic_phone: string;
trial_duration: number;
token: number;
user_quota: number;
website: string;
}
interface CompanyDataStep1 {
address: string;
color: string;
email: string;
name: string;
phone: string;
pic_email: string;
parent_id: number;
pic_name: string;
pic_phone: string;
website: string;
}

interface CompanyDataStep2 {
contract_end_date: string;
contract_start_date: string;
contract_value: number;
user_quota: number;
token: number;
referral_code: string;
cpm: number;
impression: number;

const showErrors = (field: string, valueLen: number, min: number) => {

if (valueLen === 0) {
return `${field} field is required`;
} else if (valueLen > 0 && valueLen < min) {
return `${field} must be at least ${min} characters`;
} else {
return "";
}
};
const schema = yup.object().shape({
name: yup.string().required(),
email: yup.string().email(),
website: yup.string().url(),
address: yup.string(),
phone: yup
.string()
.typeError("Phone Number field is required")
.min(10, (obj) => showErrors("Phone Number", obj.value.length, obj.min))
.required(),
color: yup.string(),

contract_end_date: yup.string().required(),
contract_start_date: yup.string().required(),
contract_value: yup.string().required(),
cpm: yup.number(),
impression: yup.number(),
parent_id: yup.number(),
app_id: yup.number(),
trial_duration: yup.number(),
include_dapil: yup.boolean(),
mh_secret_key: yup.string(),
include_disclaimer: yup.boolean(),
logo: yup.string().required(),

pic_email: yup.string().email().required(),
pic_name: yup.string().required(),
pic_phone: yup
.string()
.typeError("Phone Number field is required")
.min(10, (obj) => showErrors("Phone Number", obj.value.length, obj.min))
.required(),
referral_code: yup.string(),
token: yup.number(),
user_quota: yup.number(),
});

const schemaStep1 = yup.object().shape({

name: yup.string().required(),
email: yup.string().email(),
website: yup.string().url(),
address: yup.string(),
phone: yup
.string()
.typeError("Phone Number field is required")
.min(10, (obj) => showErrors("Phone Number", obj.value.length, obj.min))
.required(),
color: yup.string(),
pic_email: yup.string().email().required(),
pic_name: yup.string().required(),
pic_phone: yup
.string()
.typeError("Phone Number field is required")
.min(10, (obj) => showErrors("Phone Number", obj.value.length, obj.min))
.required(),
parent_id: yup.number(),
});
const schemaStep2 = yup.object().shape({
contract_end_date: yup.string().required(),
contract_start_date: yup.string().required(),
contract_value: yup.string().required(),
impression: yup.number().required(),
cpm: yup.number().required(),
referral_code: yup.string(),
token: yup.number().required(),
user_quota: yup.number(),
});

const schemaStep3 = yup.object().shape({

parent_id: yup.number(),
app_id: yup.number(),
trial_duration: yup.number(),
include_dapil: yup.boolean(),
mh_secret_key: yup.string(),
include_disclaimer: yup.boolean(),
logo: yup.string().required(),
});

const defaultValues = {
address: "",
app_id: Number(""),
color: "",
contract_end_date: "2023-03-23",
contract_start_date: "2023-02-12",
contract_value: Number(""),
cpm: Number(""),
email: "",
impression: Number(""),
include_dapil: false,
include_disclaimer: false,
logo: "",
name: "",
phone: "",
pic_email: "",
pic_name: "",
pic_phone: "",
token: Number(""),
parent_id: Number(""),
mh_secret_key: "",
trial_duration: Number(""),
referral_code: "",
user_quota: Number(""),
website: "https://",
};

const SidebarAddCompany = (props: SidebarAddCompanyType) => {

// ** Props
const { open, toggle } = props;

// ** Hooks
const dispatch = useDispatch<AppDispatch>();

const appData = useSelector((state: RootState) => state.appMaster);

const companyData = useSelector((state: RootState) => state.company);

const [selectedImage, setSelectedImage] = useState<File | null>(null);

const [endDate, setEndDate] = useState<DateType>(null);

const [startDate, setStartDate] = useState<DateType>(null);

const [activeStep1, setActiveStep1] = useState<number>(0);

const [activeStep2, setActiveStep2] = useState<number>(0);

useEffect(() => {
dispatch(getData());
}, [dispatch]);

const handleNext1 = (data: CompanyDataStep1) => {

setActiveStep1((prevActiveStep) => prevActiveStep + 1);
};

const handleNext2 = (data: CompanyDataStep2) => {

setActiveStep2((prevActiveStep) => prevActiveStep + 1);
};

const handleBack1 = () => {

setActiveStep1((prevActiveStep) => prevActiveStep - 1);
};

const handleBack2 = () => {

setActiveStep2((prevActiveStep) => prevActiveStep - 1);
};

const {
reset,
control,
setValue,
handleSubmit,
watch,
formState: { errors },
} = useForm({
defaultValues:{

},
mode: "onChange",
resolver: yupResolver(schema),
});

const formStep2 = useForm({

defaultValues: {

},
resolver: yupResolver(
schemaStep2.transform((data) => {
data.contract_start_date = dayjs(data.to).format("YYYY-MM-DD");
data.contract_end_date = dayjs(data.from).format("YYYY-MM-DD");
return data;
})
),
});

const onSubmit = (data: CompanyData) => {

 try {
dispatch(addCompany({ ...data }));

toast.success("Company added successfully");

// toggle();
// reset();
} catch (error) {
toast.error("An error occurred while adding the company");
}
};

const handleClose = () => {

toggle();
reset();
};

const uploadImage = async (file: any) => {

if (file && file[0]) {
setSelectedImage(file[0]);
const reader = new FileReader();

reader.onload = (e) => {

const previewUrl = e.target?.result;
if (typeof previewUrl === "string") {
setValue("logo", previewUrl);
}
};

reader.readAsDataURL(file[0]);
}
};

const handleOnChange = (dates: any) => {

const [start, end] = dates;
setStartDate(start);
setEndDate(end);
};

const CustomInput = forwardRef((props: PickerProps, ref) => {

const startDate =
props.start !== null ? format(props.start, "MM/dd/yyyy") : "";
const endDate =
props.end !== null ? ` - ${format(props.end, "MM/dd/yyyy")}` : null;

const value = `${startDate}${endDate !== null ? endDate : ""}`;

return (
<TextField
{...props}
size="small"
value={value}
inputRef={ref}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Icon icon="tabler:calendar-event" />
</InputAdornment>
),
 endAdornment: (
<InputAdornment position="end">
<Icon icon="tabler:chevron-down" />
</InputAdornment>
),
}}
/>
);
});
CustomInput.displayName = "CustomInput";

const [tabs, setTabs] = useState<number>(0);

const handleChangeTabs = (event: ChangeEvent<{}>, newValue: number) => {

setTabs(newValue);
};

const handlePrevious = () => {

if (tabs === 1) {
setTabs(0);
} else if (tabs === 2) {
setTabs(1);
}
};

return (
<Dialog
open={open}
onClose={handleClose}
fullWidth
maxWidth="md"
sx={{ maxHeight: "80rem" }}
>
<DialogTitle>
<Box sx={{ justifyContent: "space-between", display: "flex" }}>
<Typography variant="h5">Add Company</Typography>
</Box>
</DialogTitle>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Tabs value={tabs} onChange={handleChangeTabs}>
<Tab label="Company Profile" />
<Tab label="Company Contract" />
<Tab label="Other" />
</Tabs>
</Box>
<DialogContent
sx={{
overflow: "auto",
scrollbarWidth: "thin",
scrollbarColor: "#bbb transparent",
minHeight: { xs: "60rem", md: "40rem" },
}}
>
<form onSubmit={handleSubmit(onSubmit)}>
<Grid
container
spacing={1}
sx={{ p: (theme) => theme.spacing(0, 6, 6), marginTop: 2 }}
>
<Grid item container md={12} spacing={5} marginTop={1}>
{tabs === 0 && (
<>
<Grid item xs={12} md={6}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="name"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
value={value}
label="Company Name"
onChange={onChange}
placeholder="PT. MAJU MUNDUR"
error={Boolean(errors.name)}
/>
)}
/>
{errors.name && (
<FormHelperText sx={{ color: "error.main" }}>
{errors.name.message}
</FormHelperText>
)}
</FormControl>
</Grid>

<Grid item xs={12} md={6}>

<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="email"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
type="email"
value={value}
label="Email"
onChange={onChange}
placeholder="[email protected]"
error={Boolean(errors.email)}
/>
)}
/>
{errors.email && (
<FormHelperText sx={{ color: "error.main" }}>
{errors.email.message}
</FormHelperText>
)}
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="website"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
 <TextField
value={value}
label="Website"
onChange={onChange}
placeholder="https://mycompany.com"
error={Boolean(errors.website)}
/>
)}
/>
{errors.website && (
<FormHelperText sx={{ color: "error.main" }}>
{errors.website.message}
</FormHelperText>
)}
</FormControl>
</Grid>

<Grid item xs={12} md={6}>

<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="phone"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
type="number"
value={value}
label="Telepon Company"
onChange={onChange}
placeholder="0800-1234-4567"
error={Boolean(errors.phone)}
/>
)}
/>
{errors.phone && (
<FormHelperText sx={{ color: "error.main" }}>
{errors.phone.message}
</FormHelperText>
)}
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="address"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
type="text"
value={value}
label="Company Address"
onChange={onChange}
placeholder="Indonesia"
error={Boolean(errors.address)}
/>
)}
/>
{errors.address && (
 <FormHelperText sx={{ color: "error.main" }}>
{errors.address.message}
</FormHelperText>
)}
</FormControl>
</Grid>
<Grid item md={6} xs={12}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="color"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
type="text"
value={value}
label="Company Color"
onChange={onChange}
placeholder="#121212"
error={Boolean(errors.color)}
/>
)}
/>
{errors.color && (
<FormHelperText sx={{ color: "error.main" }}>
{errors.color.message}
</FormHelperText>
)}
</FormControl>
</Grid>
<Grid item md={6} xs={12}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="pic_name"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
value={value}
label="Pic Name"
onChange={onChange}
placeholder="John Doe"
error={Boolean(errors.pic_name)}
/>
)}
/>
{errors.pic_name && (
<FormHelperText sx={{ color: "error.main" }}>
{errors.pic_name.message}
</FormHelperText>
)}
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="pic_phone"
control={control}
rules={{ required: true }}
 render={({ field: { value, onChange } }) => (
<TextField
type="number"
value={value}
label="Telepon PIC"
onChange={onChange}
placeholder="0800-1234-5678"
error={Boolean(errors.pic_phone)}
/>
)}
/>
{errors.pic_phone && (
<FormHelperText sx={{ color: "error.main" }}>
{errors.pic_phone.message}
</FormHelperText>
)}
</FormControl>
</Grid>
<Grid item md={6} xs={12}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="pic_email"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
value={value}
label="Pic Email"
onChange={onChange}
placeholder="John Doe"
error={Boolean(errors.pic_email)}
/>
)}
/>
{errors.pic_email && (
<FormHelperText sx={{ color: "error.main" }}>
{errors.pic_email.message}
</FormHelperText>
)}
</FormControl>
</Grid>

<Grid item md={6} xs={12}>

<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="parent_id"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => {
const selectedOption = companyData.data.find(
(option) => option === value
);
return (
<Autocomplete
options={companyData.data}
getOptionLabel={(option) =>
(option as { name: string }).name
}
renderInput={(params) => (
 <TextField
{...params}
label="Company Parent"
error={Boolean(errors.parent_id)}
helperText={
errors.parent_id
? "This field is required"
: ""
}
/>
)}
value={selectedOption}
onChange={(event, newValue) => {
const selectedId = newValue
? (newValue as { id: string }).id
: null;
onChange(selectedId);
}}
/>
);
}}
/>

{/* {errors.parent_id && (

<FormHelperText
sx={{ color: "error.main" }}
id="validation-company-select"
>
This field is required
</FormHelperText>
)} */}
</FormControl>
</Grid>
</>
)}

{tabs === 1 && (

<>
<Grid item xs={12} md={6}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="contract_value"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
type="number"
value={value}
label="Contract Value"
onChange={onChange}
placeholder="20500000"
error={Boolean(errors.contract_value)}
/>
)}
/>
{errors.contract_value && (
<FormHelperText sx={{ contract_value: "error.main" }}>
{errors.contract_value.message}
</FormHelperText>
 )}
</FormControl>
</Grid>

<Grid item xs={12} md={6}>

<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="token"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
type="number"
value={value}
label="Number of Tokens"
onChange={onChange}
placeholder="1300"
error={Boolean(errors.token)}
/>
)}
/>
{errors.token && (
<FormHelperText sx={{ token: "error.main" }}>
{errors.token.message}
</FormHelperText>
)}
</FormControl>
</Grid>

<Grid item md={6} xs={12}>

<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="impression"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
type="number"
value={value}
label="Impression"
onChange={onChange}
placeholder="1333"
error={Boolean(errors.impression)}
/>
)}
/>
{errors.impression && (
<FormHelperText sx={{ impression: "error.main" }}>
{errors.impression.message}
</FormHelperText>
)}
</FormControl>
</Grid>

<Grid item md={6} xs={12}>

<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="user_quota"
control={control}
 rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
type="number"
value={value}
label="User Kuota"
onChange={onChange}
placeholder="13"
error={Boolean(errors.user_quota)}
InputProps={{
endAdornment: (
<InputAdornment position="end">
Users
</InputAdornment>
),
}}
/>
)}
/>
{errors.user_quota && (
<FormHelperText sx={{ user_quota: "error.main" }}>
{errors.user_quota.message}
</FormHelperText>
)}
</FormControl>
</Grid>
<Grid item md={6} xs={12}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="cpm"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
type="number"
value={value}
label="Campaign costs (CPM)"
onChange={onChange}
placeholder="3000000"
error={Boolean(errors.cpm)}
/>
)}
/>
{errors.cpm && (
<FormHelperText sx={{ cpm: "error.main" }}>
{errors.cpm.message}
</FormHelperText>
)}
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="referral_code"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
type="text"
 value={value}
label="Referral Code"
onChange={onChange}
placeholder="D32ASC3"
error={Boolean(errors.referral_code)}
/>
)}
/>
{errors.referral_code && (
<FormHelperText sx={{ referral_code: "error.main" }}>
{errors.referral_code.message}
</FormHelperText>
)}
</FormControl>
</Grid>
</>
)}
{tabs === 2 && (
<>
<Grid item container md={12} xs={12}>
<Grid item xs={12}>
{watch("logo") ? (
<Grid container>
<Grid item md={6} xs={12}>
<Box
sx={({ palette, shape }) => ({
border: `1px solid ${palette.primary.main}`,
borderRadius: shape.borderRadius + "px",
height: "12rem",
width: "12rem",
position: "relative",
padding: 3,
})}
>
<img
height="100%"
width="100%"
src={watch("logo")}
alt="Preview"
style={{ objectFit: "contain" }}
/>
<HeaderIcon
sx={{
position: "absolute",
top: "8px",
right: "8px",
}}
color="error"
onClick={() => {
setValue("logo", "");
}}
>
<Icon icon="tabler:trash" />
</HeaderIcon>
</Box>
</Grid>
</Grid>
) : (
<Grid item xs={12}>
 <Button
variant="outlined"
size="large"
component="label"
sx={{ height: "12rem", width: "12rem" }}
>
<span style={{ fontSize: "12px" }}>
{" "}
Upload Logo
</span>
<Input
type="file"
onChange={(e) =>
uploadImage(
(e.target as HTMLInputElement).files
)
}
sx={{ display: "none" }}
/>
</Button>
</Grid>
)}
</Grid>
</Grid>
<Grid item md={6} xs={12}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="trial_duration"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
type="number"
value={value}
label="Trial Duration"
onChange={onChange}
placeholder="3"
error={Boolean(errors.trial_duration)}
InputProps={{
endAdornment: (
<InputAdornment position="end">
Days
</InputAdornment>
),
}}
/>
)}
/>
{errors.trial_duration && (
<FormHelperText sx={{ trial_duration: "error.main" }}>
{errors.trial_duration.message}
</FormHelperText>
)}
</FormControl>
</Grid>
<Grid item md={6} xs={12}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="app_id"
 control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => {
const selectedOption = appData.data.find(
(option) => option === value
);
return (
<Autocomplete
options={appData.data}
getOptionLabel={(option) =>
(option as { apps: string }).apps
}
renderInput={(params) => (
<TextField
{...params}
label="App Name"
error={Boolean(errors.app_id)}
helperText={
errors.app_id
? "This field is required"
: ""
}
/>
)}
value={selectedOption}
onChange={(event, newValue) => {
const selectedId = newValue
? (newValue as { id: string }).id
: null;
onChange(selectedId);
}}
/>
);
}}
/>
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<FormControl fullWidth sx={{ mb: 4 }}>
<InputLabel
id="validation-include-dapil-select"
error={Boolean(errors.include_dapil)}
htmlFor="validation-include-dapil-select"
>
Include Dapil
</InputLabel>
<Controller
name="include_dapil"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<Select
value={value}
label="include_dapil"
onChange={onChange}
error={Boolean(errors.include_dapil)}
labelId="validation-include_dapil-select"
aria-describedby="validation-include_dapil-select"
>
 <MenuItem value="false">No</MenuItem>
<MenuItem value="true">Yes</MenuItem>
</Select>
)}
/>
{errors.include_dapil && (
<FormHelperText
sx={{ color: "error.main" }}
id="validation-include_dapil-select"
>
This field is required
</FormHelperText>
)}
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<FormControl fullWidth sx={{ mb: 4 }}>
<InputLabel
id="validation-include-disclaimer-select"
error={Boolean(errors.include_disclaimer)}
htmlFor="validation-include-disclaimer-select"
>
Include Disclaimer
</InputLabel>
<Controller
name="include_disclaimer"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<Select
value={value}
label="include_disclaimer"
onChange={onChange}
error={Boolean(errors.include_disclaimer)}
labelId="validation-include-disclaimer-select"
aria-describedby="validation-include-disclaimer-select"
>
<MenuItem value="false">No</MenuItem>
<MenuItem value="true">Yes</MenuItem>
</Select>
)}
/>
{errors.include_disclaimer && (
<FormHelperText
sx={{ color: "error.main" }}
id="validation-include-disclaimer-select"
>
This field is required
</FormHelperText>
)}
</FormControl>
</Grid>
{/* <Grid item xs={12} md={6}>
<FormControl fullWidth sx={{ mb: 4 }}>
<DatePicker
selectsRange
endDate={endDate}
id=""
selected={startDate}
 startDate={startDate}
onChange={handleOnChange}
sx={{ backgroundColor: "red" }}
placeholderText="Click to select a date"
customInput={
<CustomInput
start={startDate as Date | number}
end={endDate as Date | number}
/>
}
/>
</FormControl>
</Grid> */}

<Grid item xs={12} md={6}>

<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name="mh_secret_key"
control={control}
rules={{ required: true }}
render={({ field: { value, onChange } }) => (
<TextField
type="text"
value={value}
label="Marketing Hub Token"
onChange={onChange}
placeholder="mhxxxxtokensss"
error={Boolean(errors.mh_secret_key)}
/>
)}
/>
{errors.mh_secret_key && (
<FormHelperText sx={{ mh_secret_key: "error.main" }}>
{errors.mh_secret_key.message}
</FormHelperText>
)}
</FormControl>
</Grid>
</>
)}

<Grid item xs={12}>

<DialogActions>
{(tabs === 0 && (
<Box sx={{ display: "flex", alignItems: "center" }}>
<Button
variant="outlined"
sx={{ mr: 3 }}
color="secondary"
onClick={handleClose}
>
Cancel
</Button>
{/* <Button
onClick={handleNext}
// disabled={!field1 || !field2 || !field3}
variant="contained"
endIcon={<Icon icon="grommet-icons:next" />}
>
 Next
</Button> */}
</Box>
)) ||
(tabs === 1 && (
<Box sx={{}}>
<Button
variant="outlined"
color="secondary"
sx={{ mr: 3 }}
onClick={handlePrevious}
>
Previous
</Button>
{/* <Button
onClick={handleNext}
variant="contained"
endIcon={<Icon icon="grommet-icons:next" />}
>
Next
</Button> */}
</Box>
)) ||
(tabs === 2 && (
<>
<Button
variant="outlined"
sx={{ mr: 3 }}
color="secondary"
onClick={handlePrevious}
>
Previous
</Button>
<Button type="submit" variant="contained">
Submit
</Button>
</>
))}
</DialogActions>
</Grid>
</Grid>
</Grid>
</form>
</DialogContent>
</Dialog>
);
};

export default SidebarAddCompany;

// cara agar dialog action fixed berada dibawah