import PropTypes from 'prop-types';
import * as React from 'react';
import { useTheme } from 'react-native-paper';
import Svg, { Ellipse, G, Path } from 'react-native-svg';

function Dices({ color, height, width, style }) {
  const { colors } = useTheme();
  return (
    <Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
      <Path
        d="M512 256c0 141.385-114.615 256-256 256-86.977 0-163.819-43.374-210.087-109.672v-.01a255.544 255.544 0 01-27.909-51.816A252.832 252.832 0 018.475 321.6C2.947 300.659 0 278.674 0 256c0-15.005 1.296-29.717 3.772-44.022.209-1.191.428-2.382.648-3.563a250.113 250.113 0 015.298-22.476 253.657 253.657 0 0114.367-38.463C64.909 60.343 153.412 0 256 0c141.385 0 256 114.615 256 256z"
        fill={colors.accent}
      />
      <Path
        d="M451.135 195.135c0 107.771-87.365 195.135-195.135 195.135-66.298 0-124.871-33.062-160.138-83.597v-.008a194.777 194.777 0 01-21.274-39.497 192.722 192.722 0 01-7.264-22.031c-4.213-15.961-6.46-32.719-6.46-50.003 0-11.437.987-22.651 2.876-33.555.16-.908.327-1.816.494-2.716a190.54 190.54 0 014.039-17.132 193.362 193.362 0 0110.952-29.318C110.341 45.996 177.803 0 256 0c107.771 0 195.135 87.365 195.135 195.135z"
        fill={colors.accent}
      />
      <G fill="#d6dfe8">
        <Path d="M509.816 287.807c0 3.135-1.515 6.269-4.545 8.119l-129.546 79.276a25.18 25.18 0 01-26.279 0L219.9 295.926c-3.03-1.849-4.545-4.984-4.545-8.119 0-3.124 1.515-6.248 4.545-8.108l129.546-79.276a25.18 25.18 0 0126.279 0l129.546 79.276c3.03 1.859 4.545 4.983 4.545 8.108z" />
        <Path d="M215.353 123.246h294.463v164.561H215.353z" />
      </G>
      <Path
        d="M362.58 235.492v143.409a25.142 25.142 0 01-13.134-3.699L219.9 295.926c-3.03-1.849-4.545-4.984-4.545-8.119V123.246l133.639 87.162a29.95 29.95 0 0113.586 25.084z"
        fill="#b6c5d3"
      />
      <Path
        d="M505.268 115.132L375.72 35.857a25.165 25.165 0 00-26.272 0L219.9 115.132c-6.064 3.71-6.064 12.518 0 16.228l129.548 79.275a25.165 25.165 0 0026.272 0l129.547-79.275c6.064-3.71 6.064-12.517.001-16.228z"
        fill="#eaf1f9"
      />
      <G fill="#574d70">
        <Ellipse cx={362.58} cy={126.046} rx={29.56} ry={17.335} />
        <Ellipse
          transform="rotate(-67.5 446.275 253.952)"
          cx={446.286}
          cy={253.959}
          rx={15.326}
          ry={10.449}
        />
        <Ellipse
          transform="rotate(-67.5 482.402 276.104)"
          cx={482.414}
          cy={276.111}
          rx={15.326}
          ry={10.449}
        />
        <Ellipse
          transform="rotate(-67.5 482.398 188.55)"
          cx={482.41}
          cy={188.555}
          rx={15.326}
          ry={10.449}
        />
        <Ellipse
          transform="rotate(-67.5 410.138 319.353)"
          cx={410.148}
          cy={319.362}
          rx={15.326}
          ry={10.449}
        />
        <Ellipse
          transform="rotate(-67.5 410.137 230.538)"
          cx={410.148}
          cy={230.544}
          rx={15.326}
          ry={10.449}
        />
        <Ellipse
          transform="rotate(76.272 322.581 314.154)"
          cx={322.57}
          cy={314.143}
          rx={15.325}
          ry={10.449}
        />
      </G>
      <G fill="#d6dfe8">
        <Path d="M264.411 350.501c0 3.135-1.515 6.269-4.545 8.119L130.32 437.896a25.18 25.18 0 01-26.279 0l-58.128-35.568v-.01a255.544 255.544 0 01-27.909-51.816A252.832 252.832 0 018.475 321.6l95.566-58.483a25.182 25.182 0 0126.279 0l129.546 79.276c3.03 1.859 4.545 4.983 4.545 8.108z" />
        <Path d="M264.411 185.94v164.561H18.004C6.384 321.264 0 289.374 0 256c0-16.259 1.515-32.162 4.42-47.585a250.113 250.113 0 015.298-22.476h254.693z" />
      </G>
      <Path
        d="M117.175 298.183v143.412a25.142 25.142 0 01-13.134-3.699l-58.128-35.568a255.12 255.12 0 01-28.62-53.635 249.698 249.698 0 01-5.099-14.399C5.308 312.832 1.17 290.126.219 266.606A255.89 255.89 0 010 256c0-4.618.125-9.216.366-13.772a255.062 255.062 0 014.054-33.813l99.171 64.69a29.945 29.945 0 0113.584 25.078z"
        fill="#b6c5d3"
      />
      <Path
        d="M259.866 194.058L130.32 273.335a25.186 25.186 0 01-26.279 0L3.772 211.978c.209-1.191.428-2.382.648-3.563a250.113 250.113 0 015.298-22.476 253.657 253.657 0 0114.367-38.463l79.956-48.922a25.143 25.143 0 0126.279 0l129.546 79.266c6.061 3.721 6.061 12.529 0 16.238z"
        fill="#eaf1f9"
      />
      <G fill="#574d70">
        <Ellipse cx={117.175} cy={185.208} rx={18.996} ry={11.146} />
        <Ellipse cx={117.175} cy={133.977} rx={18.996} ry={11.146} />
        <Ellipse cx={117.175} cy={236.429} rx={18.996} ry={11.146} />
        <Ellipse
          transform="rotate(-75.498 197.072 319.422)"
          cx={197.064}
          cy={319.409}
          rx={27.658}
          ry={18.86}
        />
        <Ellipse
          transform="rotate(67.5 78.274 387.257)"
          cx={78.276}
          cy={387.267}
          rx={15.326}
          ry={10.449}
        />
        <Ellipse
          transform="rotate(67.5 78.273 298.444)"
          cx={78.275}
          cy={298.452}
          rx={15.326}
          ry={10.449}
        />
        <Path d="M11.88 270.618c-3.699 1.536-8.182-.199-11.661-4.012A255.89 255.89 0 010 256c0-4.618.125-9.216.366-13.772 5.298-2.017 12.11 2.518 15.308 10.23 3.239 7.826 1.546 15.955-3.794 18.16z" />
      </G>
    </Svg>
  );
}

Dices.defaultProps = {
  height: 120,
  width: 120,
  color: 'white',
};

Dices.propTypes = {
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  style: PropTypes.object,
  color: PropTypes.string,
};

export default Dices;