import React, { useState } from 'react';

import { colorList, getImportsString, getPropsString } from '../helpers';

import Playground from '../Playground/Playground';
import { Rating } from '@/mui/components';

function RatingSection() {
  const [value, setValue] = useState(4);
  return (
    <Playground
      title="Rating"
      initialState={[
        {
          type: 'select',
          stateId: 'color',
          options: colorList,
          selected: 'warning',
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['xSmall', 'small', 'medium', 'large'],
          selected: 'medium',
        },
        {
          type: 'select',
          stateId: 'precision',
          options: [0.5, 1],
          selected: '0.5',
        },
        {
          type: 'select',
          stateId: 'max',
          options: new Array(9).fill(0).map((_, i) => `${i + 2}`),
          selected: '4',
        },
        {
          type: 'checkbox',
          stateId: 'highlightSelectedOnly',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'readOnly',
          selected: false,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
      ]}
      renderCallback={(state) => {
        const props = {
          ...state,
          value,
          precision: +state.precision || 0,
          max: +state.max || 1,
          onChange: (event, newValue) => setValue(newValue),
        };

        const importsList = getImportsString([[['Rating']]]);

        return {
          component: <Rating {...props} />,
          code: `${importsList}
<Rating${getPropsString(props)}/>`,
        };
      }}
    />
  );
}

export default RatingSection;
