import { Theme, useTheme } from '@mui/material/styles';
import Box from '@mui/system/Box';
import { useDispatch } from 'react-redux';
import {
  changeDataPointColors,
  changePrimary,
} from '@graphpolaris/shared/data-access/store';
import styled from 'styled-components';
import { Button } from '@mui/material';

const Div = styled.div`
  background-color: ${(props) => props.theme.palette.dataPointColors[0]};
  position: relative;
`;

const SemanticSubstrates = () => {
  const dispatch = useDispatch();
  const theme = useTheme();

  return (
    <>
      <Div>
        <h1>semantic substrates div</h1>
      </Div>
      <div
        style={{
          backgroundColor: theme.palette.primary.main,
        }}
      >
        <h1>semantic substrates h1</h1>
      </div>
      <input
        onChange={(v) =>
          dispatch(changePrimary({ main: v.currentTarget.value }))
        }
        type="color"
        name="head"
        value={theme.palette.primary.main}
      />{' '}
      <p>Change Primary Color</p>
      <input
        onChange={(v) =>
          dispatch(
            changeDataPointColors([
              v.currentTarget.value,
              ...theme.palette.dataPointColors.slice(1),
            ])
          )
        }
        type="color"
        id="head"
        name="head"
        value={theme.palette.dataPointColors[0]}
      />
      <p>Change dataPointColor 0</p>
      <input
        onChange={(v) =>
          dispatch(
            changeDataPointColors([
              theme.palette.dataPointColors[0],
              v.currentTarget.value,
              ...theme.palette.dataPointColors.slice(2),
            ])
          )
        }
        type="color"
        id="head"
        name="head"
        value={theme.palette.dataPointColors[1]}
      />
      <p>Change dataPointColor 1</p>
      <Button variant="contained">hoi</Button>
    </>
  );
};

export default SemanticSubstrates;