import React, { useState } from 'react';
import { Switch } from '@mui/material';
import { styled } from '@mui/material/styles';
import { Grip, List } from 'lucide-react';

const CustomSwitch = styled(Switch)(({ theme }) => ({
    width: 54,
    height: 28,
    padding: 0,
    display: 'flex',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 20,
    position: 'relative',
    '& .MuiSwitch-switchBase': {
        padding: 0,
        margin: 2,
        transform: 'translateX(2px)',
        '&.Mui-checked': {
        transform: 'translateX(26px)',
        '& .MuiSwitch-thumb': {
            backgroundColor: '#52d868c4',
        },
        },
    },
    '& .MuiSwitch-thumb': {
        width: 24,
        height: 24,
        backgroundColor: '#52d868c4',
        boxShadow: 'none',
    },
    '& .MuiSwitch-track': {
        // border: '1px solid #d2d2d2',
        borderRadius: 20,
        backgroundColor: '#fff !important',
        opacity: 1,
        transition: 'background-color 0.3s',
    },
    '& .Mui-checked+.MuiSwitch-track': {
        backgroundColor: '#fff !important',
    },
}));

const IconWrapper = styled('div')({
  position: 'absolute',
  top: '50%',
  transform: 'translateY(-50%)',
  color: 'black',
  zIndex: 1,
});

const GripIcon = styled(IconWrapper)({
  left: 6,
});

const ListIcon = styled(IconWrapper)({
  right: 6,
});

type PropsType = {
    defaultChecked?: boolean;
    checked?: boolean;
    onChange: (checked: boolean) => void
};

const SwitchView: React.FC<PropsType> = ({ checked, defaultChecked, onChange }) => {
    const toggle = () => onChange(!checked);
    return (
        <div style={{ position: 'relative', width: 54, height: 28, cursor: 'pointer' }} onClick={toggle}>
            <GripIcon style={{ paddingLeft: '1.8px' }}>
                <Grip size={16} />
            </GripIcon>
            <ListIcon>
                <List size={16} />
            </ListIcon>
            <CustomSwitch
                defaultChecked={defaultChecked}
                checked={checked}
                // onChange={(e) => onChange(e.target.checked)}
            />
        </div>
    );
};

export default SwitchView;