import styled from "styled-components";

export const sizes = {
  xs: {
    height: "8px",
    borderRadius: "4px",
  },
  sm: {
    height: "12px",
    borderRadius: "6px",
  },
  md: {
    height: "16px",
    borderRadius: "8px",
  },
  lg: {
    height: "24px",
    borderRadius: "12px",
  },
  xl: {
    height: "32px",
    borderRadius: "16px",
  },
};

export const Container = styled.div`
  width: 100%;
  padding: 50px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: ${(props) =>
    props.disabled ? "transparent" : "rgba(2, 215, 190, 0.091)"};
  border: 1px solid
    ${(props) => (props.disabled ? "#fff" : "rgba(2, 215, 190, 0.091)")};
  position: relative;

  .switch {
    position: absolute;
    top: 10px;
    left: 10px;
  }
`;
export const ProgressBarContainer = styled.div`
  position: relative;
  width: 100%;
  height: ${(props) => sizes[props.size].height};
  border-radius: ${(props) => sizes[props.size].borderRadius};
`;

export const ProgressBarTotal = styled.div`
  position: absolute;
  height: 100%;
  border-radius: 10px;
  background-color: ${(props) => (props.disabled ? "rgba(255, 255, 255, 0.069)" : props.color)};
  left: ${(props) => props.left}%;
  width: ${(props) => props.width}%;
  z-index: 1;
`;

export const ProgressBarUsed = styled(ProgressBarTotal)`
  background-color: ${(props) => (props.disabled ? "#ffffff" : props.color)};
  z-index: 2;
`;

export const ProgressBarAvailable = styled(ProgressBarTotal)`
  background-color: ${(props) =>
    props.disabled ? "rgba(255, 255, 255, 0.069)" : props.color};
  left: ${(props) => props.left}%;
  width: ${(props) => props.width}%;
  z-index: 1;
`;

export const ProgressHandle = styled.div`
  position: absolute;
  top: 50%;
  left: ${(props) => props.left - "0.5"}%;
  ${(props) =>
    props.disabled
      ? ``
      : `
   width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid rgba(0, 194, 194, 1);
  `}

  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  /* visibility: ${(props) => (props.disabled ? "hidden" : "visible")}; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
`;

export const HandleValue = styled.div`
  position: absolute;
  bottom: -30px;
  font-size: 12px;
  color: ${(props) => (props.disabled ? "#ffffff" : props.color)};
`;

export const MinValue = styled.span`
  position: absolute;
  left: 0;
  bottom: -20px;
  font-size: 12px;
  color: ${(props) => (props.disabled ? "#ffffff" : props.color)};
`;

export const MaxValue = styled.span`
  position: absolute;
  right: 0;
  bottom: -20px;
  font-size: 12px;
  color: ${(props) => (props.disabled ? "#ffffff" : props.color)};
`;
