import React, { useState } from 'react';
import {
Accordion,
AccordionSummary,
AccordionDetails,
Typography,
TextField,
FormControl,
InputLabel,
MenuItem,
Select,
} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { prefixString } from '../common/util/stringUtils';
import EditItemView from './components/EditItemView';
import EditAttributesAccordion from './components/EditAttributesAccordion';
import { useAttributePreference } from '../common/util/preferences';
import {
speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters,
} from '../common/util/converter';
import { useTranslation } from '../common/components/LocalizationProvider';
import usePositionAttributes from '../common/attributes/usePositionAttributes';
import SettingsMenu from './components/SettingsMenu';
import useSettingsStyles from './common/useSettingsStyles';
const MaintenancePage = () => {
const classes = useSettingsStyles();
const t = useTranslation();
const positionAttributes = usePositionAttributes(t);
const [item, setItem] = useState();
const [labels, setLabels] = useState({ start: '', period: '' });
const speedUnit = useAttributePreference('speedUnit', 'kn');
const distanceUnit = useAttributePreference('distanceUnit', 'km');
const convertToList = (attributes) => {
const otherList = [];
Object.keys(attributes).forEach((key) => {
const value = attributes[key];
if (value.type === 'number' || key.endsWith('Time')) {
otherList.push({ key, name: value.name, type: value.type });
}
});
return otherList;
};
const onMaintenanceTypeChange = (event) => {
const newValue = event.target.value;
setItem({
...item, type: newValue, start: 0, period: 0,
});
const attribute = positionAttributes[newValue];
if (attribute && attribute.dataType) {
switch (attribute.dataType) {
case 'distance':
setLabels({ ...labels, start: t(prefixString('shared', distanceUnit)), period: t(prefixString('shared', distanceUnit)) });
break;
case 'speed':
setLabels({ ...labels, start: t(prefixString('shared', speedUnit)), period: t(prefixString('shared', speedUnit)) });
break;
default:
setLabels({ ...labels, start: null, period: null });
break;
}
} else {
setLabels({ ...labels, start: null, period: null });
}
};
const rawToValue = (value) => {
const attribute = positionAttributes[item.type];
if (attribute && attribute.dataType) {
switch (attribute.dataType) {
case 'speed':
return speedFromKnots(value, speedUnit);
case 'distance':
return distanceFromMeters(value, distanceUnit);
default:
return value;
}
}
return value;
};
const valueToRaw = (value) => {
const attribute = positionAttributes[item.type];
if (attribute && attribute.dataType) {
switch (attribute.dataType) {
case 'speed':
return speedToKnots(value, speedUnit);
case 'distance':
return distanceToMeters(value, distanceUnit);
default:
return value;
}
}
return value;
};
const validate = () => item && item.name && item.type && item.start && item.period;
return (
}
breadcrumbs={['settingsTitle', 'sharedMaintenance']}
>
{item && (
<>
}>
{t('sharedRequired')}
setItem({ ...item, name: event.target.value })}
label={t('sharedName')}
/>
{t('sharedType')}
setItem({ ...item, start: valueToRaw(event.target.value) })}
label={labels.start ? `${t('maintenanceStart')} (${labels.start})` : t('maintenanceStart')}
/>
setItem({ ...item, period: valueToRaw(event.target.value) })}
label={labels.period ? `${t('maintenancePeriod')} (${labels.period})` : t('maintenancePeriod')}
/>
setItem({ ...item, attributes })}
definitions={{}}
/>
>
)}
);
};
export default MaintenancePage;