const EditView = ({
valveControlValues,
onOrderChange,
onAddNewValveControl,
}: {
valveControlValues: typeof DUMMY_PARAMETERS;
onOrderChange: (newOrders: string[]) => void;
onAddNewValveControl: () => void;
}) => {
const onStackOrderChange = useCallback(
(value: (string | number)[]) => {
onOrderChange(value.map((item) => item.toString()));
},
[onOrderChange],
);
return (
<View className="flex flex-col gap-y-2">
<View className="flex flex-row">
<DndProvider>
<DraggableStack
style={{
display: 'flex',
flexDirection: 'column',
gap: 4,
}}
onOrderChange={onStackOrderChange}>
{valveControlValues.map(({ id, name }) => (
<Draggable className="flex flex-row items-center gap-x-4" key={id} id={id.toString()}>
<DragHandleIcon className="fill-textSecondary" />
<Text className="font-Inter-Medium-500 text-s14-l20 text-textPrimary">{name}</Text>
</Draggable>
))}
</DraggableStack>
</DndProvider>
</View>
<Pressable className={SYSTEM_OUTLINE_BTN} onPress={onAddNewValveControl}>
<Text className="font-Inter-SemiBold-600 text-s16-l24 text-textSecondary">Ekle</Text>
</Pressable>
</View>
);
};
const ManualControlSection = () => {
const [valveControlValues, setValveControlValues] = useState(DUMMY_PARAMETERS);
const onOrderChange = useCallback((newOrders: string[]) => {
setValveControlValues((prev) =>
prev.map((value) => ({
...value,
order: newOrders.indexOf(value.id.toString()) + 1,
})),
);
}, []);
const onAddNewValveControl = useCallback(() => {
setValveControlValues((prev) => [
...prev,
{
id: prev.length + 1,
name: `New Valve Control ${prev.length + 1}`,
value: false,
isChanged: false,
order: prev.length + 1,
},
]);
}, []);
return (
<EditView
valveControlValues={valveControlValues}
onOrderChange={onOrderChange}
onAddNewValveControl={onAddNewValveControl}
/>
);
};
export default ManualControlSection;
